Charts

Transform data into information. The Charts module enables users to build dynamic charts without writing a line of code by using the Views module or a Chart field (advanced users can make use of the Charts API). Users can choose between multiple charting libraries, such as Billboard.js, C3.js, Chart.js, Google Charts, or Highcharts.

Features

All Versions

1. Wide chart type support: Pie, Line, Bar, Column, Area or Scatter charts.
2. API: A Drupal-friendly syntax for creating charts easily, regardless of the underlying library.
3. Views integration: Display the Views results as charts.
4. Examples: The module includes lots of example charts for you to reference when building your own charts or chart library integration.
5. Supported charting libraries: Out of the box, you may use either Google Charts or Highcharts as the charting library. Remember to install the relevant submodules and the library files with Composer or Library Manager (see the README for instructions).

Additional Features

1. Charts Blocks (8.x-3.x, 5.x): This block plugin features fields for data input, so that you can chart data not already in your site without needing to use the API. As of 5.x, you can populate the data using a CSV file or through manual entry in a table: very easy! Works great with Layout Builder.
2. Charts Fields (5.x): Can be attached to your favorite entity. Like with Charts Blocks, you can populate the data using a CSV file or through manual entry in a table.
3. Generate Charts with Twig: A Twig extension to enable generation of a chart in template files. Moved to its own project here.
4. New Libraries (8.x-3.x, 5.x):
   • Billboard.js: Billboard.js is a fork of the C3.js library (below), but that uses a more recent version of D3 and has more options.
   • C3.js: C3.js makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart.
   • Chart.js: Chart.js is a simple yet flexible JavaScript charting for designers & developers.
   • Remember to install the relevant submodules and the library files with Composer or Library Manager (see the README for instructions).
5. Modular Structure (8.x-3.x, 5.x): Makes it easier to contribute new charting libraries without needing to touch the core Charts module.
6. Improved Accessibility (8.x-3.x, 5.x): Uses libraries that help charts to be more accessible. Please help make Charts more accessible.
7. Easier Library Installation (8.x-3.x, 5.x): Starting with version 5.0.1, users can take advantage of a built-in option to bring in enabled libraries via content delivery network (CDN). If local copies of the library files are detected, they will be used in place of the CDN versions. Charts uses Composer to pull in libraries locally and avoid conflicts.
8. Additional Chart Types and Options (8.x-3.x, 5.x): Includes donut, gauge, spline, and scatter charts, with options for three-dimensional and radar/polar charts. (Not all libraries)
9. Extensibility (8.x-3.x, 5.x): It is relatively simple to extend the module to suit your needs.

8.x-3.x

This version of the module is a major rewrite from the Drupal 7 version. Here's a video overview of the 8.x-3.x version of the Charts module (from MidCamp 2019). You can continue using this version or upgrade to 5.0.x for additional features.

5.0.x

This version of the module is much closer to the Drupal 7 version, but with more features. If you haven't upgraded from Drupal 7, definitely use this version. A major thanks to nikathone for his work on this version, particularly the form table for collecting data for Charts Blocks and Charts Fields.

This version uses #raw_options for overrides, so make sure you are no longer using the charts_overrides module packaged in the 8.x-3.x version. If you upgrade from 8.x-3.x, be sure to upgrade using Composer, rebuild your caches, and run database updates.

Installation and configuration

Refer to the Getting Started sections within the version-specific documentation (see sidebar links) for detailed instructions, as well as the README file included with the module, which may contain additional information.

Support

Related projects

Check out the ecosystem modules for Charts, and watch this DrupalCon Europe 2020 presentation on how charts works with other modules.

Charts is also compatible with Webform Views Integration and Search API.

For an older summary of projects related to the charts module, checkout Related Modules in the community documentation.