[5.0.x] How Charts Works

The Charts module does not work without a charting provider. These providers are charting JavaScript libraries brought into your site via Composer (or your favorite method for adding JavaScript libraries) or Content Delivery Network (CDN) if the local JavaScript library is not present. Each provider is represented by a Charts submodule (for example, charts_highcharts) that must be installed to use that module.

In addition to bringing in the charting library via charts_SUBMODULE.libraries.yml, the charting submodule is designed to transform the data and settings provided to the charts library so that it conforms to the charting provider's API.

The structure of a charting provider submodule is as follows:

charts_SUBMODULE
 - charts_SUBMODULE.info.yml
 - charts_SUBMODULE.libraries.yml
 - composer.json
 - README.txt
 - js
     - charts_SUBMODULE.js
 - src
     - Plugin
         - chart
           - Library
              - SUBMODULE.php

The SUBMODULE.php file receives configuration from your settings or code and ultimately generates a JSON object that matches the format of the charting provider's API. This object is then added to the HTML element that will contain the chart as a "data-chart" attribute that is then parsed by the charts_SUBMODULE.js file and fed to the charting provider Javascript.