Charts Twig

This module provides a Twig extension that enables you to generate charts in Twig using that Charts module API. Make sure you've installed the Charts module (including at least one submodule (and associated library), and set a default library at /admin/config/content/charts).

Recommended way of using chart()

We recommended you use the chart() function by passing it a single "definition" array that defines the entire chart. This approach is more flexible than the 1.0.x version used and allows for advanced features like multiple axes.

Simple Example

Here is a basic example that builds a two-series column chart.

{% set my_chart = { id: 'my_twig_chart', chart_type: 'column', title: 'The Chart Title'|t, series: [ { title: 'My first series'|t, data: [10, 20, 30], color: 'purple', }, { title: 'My second series'|t, data: [8, 14, 22], }, ], axes: { xaxis: { type: 'chart_xaxis', title: 'X-Axis Label'|t, labels: ['a', 'b', 'c'], } } } %}
{{ chart(my_chart) }}

Advanced Example: Multiple Y-Axes

This example demonstrates a mixed-type chart with two Y-axes. A line series is plotted against a right-side axis, and a column series is plotted against the left-side axis.

{% set complex_chart = { id: 'performance_chart', chart_type: 'column', title: 'Website Performance'|t, series: [ { title: 'Pageviews (Millions)'|t, data: [1.5, 1.7, 2.0], target_axis: 'yaxis_pageviews', }, { title: 'Load Time (ms)'|t, data: [450, 400, 380], target_axis: 'yaxis_loadtime', chart_type: 'line', }, ], axes: { xaxis: { type: 'chart_xaxis', title: 'Month'|t, labels: ['Jan', 'Feb', 'Mar'], }, yaxis_pageviews: { type: 'chart_yaxis', title: 'Pageviews (M)'|t, }, yaxis_loadtime: { type: 'chart_yaxis', title: 'Load Time (ms)'|t, opposite: true, }, }, raw_options: { subtitle: { text: 'A subtitle from raw options'|t } } } %}
{{ chart(complex_chart) }}

Legacy way of using chart()

For backwards compatibility, the chart() function still accepts a long list of arguments.

{% set title = 'The Chart Title' %} {% set data = [10, 20, 30] %} {% set data2 = [8, 14, 22] %} {% set series = { 'my_first_series' : { 'title' : 'My first series', 'data' : data, 'color': 'purple' }, 'my_second_series' : { 'title' : 'My second series', 'data' : data2 } } %} {% set xaxis = { 'title' : 'X-Axis Label', 'labels' : ['a', 'b', 'c'] } %}
{{ chart('my_twig_chart', 'column', title, series, xaxis, [], []) }}

Translation

If you plan to use translation on your site, you should use the |t filter
for any user-facing strings, as shown in the examples above.
See:https://www.drupal.org/docs/8/api/translation-api/overview

Support

Support Charts and Similar Modules

The Charts module is part of an ecosystem dedicated to empowering users to store, visualize, and analyze their data. Please consider helping to financially support the Charts ecosystem by becoming a backer or by making a one-time contribution to say thanks by joining the Charts module's Open Collective.

There are plenty of other ways to help maintain, further enhance, and support the Charts module, as detailed in how to contribute.