This module provides a Twig extension that allows you to generate charts directly within your Twig templates by using the Charts module's API. It offers a flexible way to define chart configurations using a single array, enabling advanced features like multiple axes and mixed chart types.
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.
Become a Backer Say ThanksThere are plenty of other ways to help maintain, further enhance, and support the Charts module, as detailed in how to contribute.