Charts

A charting API for Drupal that enables creating dynamic charts without code, with integration for Views, Fields, and Blocks.

charts
18,299 sites
162
drupal.org
gui api field
charting visualization Views data graphs charts field block API
Drupal 10 Drupal 11

Install

Drupal 11, 10 v5.1.10
composer require 'drupal/charts:^5.1'

Overview

The Charts module transforms data into visual information by providing a comprehensive charting API for Drupal. It enables site builders to create dynamic charts without needing to write any code, while also offering a powerful API for developers who need programmatic control.

Charts supports five major charting libraries out of the box: Billboard.js, C3.js, Chart.js, Google Charts, and Highcharts. Each library has its own advantages - from the open-source D3-based libraries to the premium features of Highcharts. The module abstracts away the complexity of these libraries, providing a unified interface for chart creation.

The module offers three main methods for creating charts through the UI: Views integration (for dynamic data visualization), Chart Fields (for embedding charts in entities), and Chart Blocks (for placing charts via Layout Builder or block placement). For developers, render arrays with chart elements provide full programmatic control.

Features

  • Support for 5 charting libraries: Billboard.js, C3.js, Chart.js, Google Charts, and Highcharts
  • 14 chart types including area, bar, column, line, pie, donut, gauge, scatter, bubble, spline, boxplot, candlestick, heatmap, and arearange
  • Views integration with Chart display format for dynamic data visualization
  • Chart Field type for embedding charts in content entities with manual data entry
  • Chart Block for Layout Builder and traditional block placement
  • Chart Attachments in Views for creating combo charts with multiple chart types
  • Secondary Y-axis support for dual-axis charts
  • Data stacking capability for grouped chart series
  • Color customization with 25 default colors and per-series color assignment
  • Entity grouping with color selection by entity reference, field property, or color field
  • CDN support for external libraries with option to use local copies
  • Debugging mode to display generated JSON for troubleshooting
  • Render Element API for programmatic chart creation
  • Alter hooks for customizing charts and library-specific definitions
  • Responsive dimensions with configurable width/height and units

Use Cases

Content Analytics Dashboard

Create a Views-based dashboard showing content statistics such as page views, user engagement, and content creation trends over time. Use the Chart display format to visualize node counts by content type as a pie chart, and monthly content creation as a line chart.

Product Sales Reporting

Use Chart Fields to embed sales performance charts directly in product nodes. Store quarterly sales data in the chart field and display it as a column chart showing sales trends. The chart appears automatically on the product page.

KPI Monitoring Blocks

Use Charts Blocks to create gauge charts showing key performance indicators. Place these blocks in a dashboard layout using Layout Builder. Configure gauge zones (green/yellow/red) to indicate performance thresholds.

Combo Charts for Comparison

Create a Views-based combo chart showing both absolute values and trends. Use the main Chart display for column data, then attach a Chart attachment display with line chart type to overlay trend lines on the same chart.

Dynamic Data from External Sources

Use the Charts API to programmatically create charts from external data sources. Build render arrays with #type 'chart', add chart_data elements for series, and configure axes. The API example module demonstrates this approach at /charts/example/display.

Taxonomy-Colored Chart Series

When grouping Views data by taxonomy term, use the entity grouping color selection feature to automatically assign colors to chart series based on the taxonomy term. Colors can be set per entity, by field property value, or from a color_field on the referenced entity.

Tips

  • Start with a Views Table display to understand your data structure, then convert to Chart format once data fields are properly configured.
  • Use the Charts API Example module (/charts/example/display) as a reference when building programmatic charts.
  • The #raw_options property allows passing library-specific options that aren't exposed in the standard configuration.
  • For combo charts combining multiple chart types, create Chart attachment displays and attach them to the parent chart display.
  • Enable debug mode during development to see the JSON being passed to the charting library - useful for troubleshooting and testing in library playgrounds.
  • When using Views grouping with entity references, leverage the entity grouping color selection to automatically color-code chart series by taxonomy or other referenced entities.
  • Chart Field data can be entered via CSV paste or manual table input - CSV is faster for large datasets.
  • Install charting libraries locally using npm or Composer for better performance and reliability compared to CDN.

Technical Details

Admin Pages 2
Chart configuration /admin/config/content/charts

Configure default settings for all charts created on the site. These defaults apply to new charts but do not affect existing charts.

Chart advanced configuration form /admin/config/content/charts/advanced

Configure advanced options for chart debugging and CDN usage.

Permissions 1
Administer Charts

Administrative permission for charts functionality

Hooks 5
hook_chart_alter

Alter an individual chart before it is printed. Allows modification of chart properties before rendering.

hook_chart_CHART_ID_alter

Alter a specific chart identified by its chart ID. Same as hook_chart_alter but targets a specific chart.

hook_chart_definition_alter

Alter a chart's raw library representation after Charts module conversion. Provides access to library-specific options but may break when switching libraries.

hook_chart_definition_CHART_ID_alter

Alter a specific chart's raw library definition by chart ID.

hook_charts_plugin_supported_chart_types_alter

Modify the list of supported chart types for a chart library plugin. Requires defining chart types in a .charts_types.yml file.

Troubleshooting 6
Chart not rendering - shows 'No charting library found' message

Enable at least one charting library submodule (charts_billboard, charts_c3, charts_chartjs, charts_google, or charts_highcharts) at /admin/modules.

Chart library not loading from CDN

Check Advanced settings at /admin/config/content/charts/advanced and ensure 'Use a CDN by default' is enabled. Note that CDN usage may cause issues with Ajax and BigPipe.

Views chart not showing any data

Ensure at least one field has 'Provides Data' checked in the Chart settings. The label field cannot also be a data provider. Check that numeric fields are properly configured.

Chart type not available in selection

Different libraries support different chart types. The Charts module only shows chart types supported by the currently selected library. Switch libraries or check library documentation for supported types.

Cannot debug chart JSON output

Enable 'Charts Debug' at /admin/config/content/charts/advanced. A collapsible details element will appear below each chart showing the JSON configuration sent to the library.

Highcharts requires commercial license warning

Highcharts is free for non-commercial use only. For commercial projects, purchase a license from highcharts.com or use an alternative open-source library like Chart.js or Billboard.js.

Security Notes 3
  • The 'access all charts' permission should be granted carefully as it provides administrative control over chart functionality.
  • Chart titles and labels are sanitized but custom raw_options are passed directly to the JavaScript library.
  • CDN usage means external resources are loaded; for high-security environments, install libraries locally.