How to Use Symfony UX Chart.js

PHPMaker User Submitted Tips (PHPMaker)
1

This guide shows how to use Symfony UX Chart.js to add interactive charts to your PHPMaker applications using the Symfony AssetMapper system.

PHPMaker supports charts in table or report pages, but if you want to add charts in Custom Files or Dashboard Reports, you need to write your own code. Symfony UX Chart.js makes it easier.

How Chart Sizing Works (Read First!)

Chart.js sizing is controlled by the parent container, not by setting width, height, or style attributes on the <canvas> or in render_chart(). If your chart does not appear at the expected size, always check the parent <div>.

Best Practice:

<div style="height: 400px; width: 100%;">
    {{ render_chart(chart) }}
</div>

Troubleshooting:

  • If the chart is too small or not visible, ensure the parent <div> has an explicit height (and width if needed).

  • The maintainAspectRatio Chart.js option is true by default. To allow the chart to stretch to the parent, set it to false in your chart options:

    $chart->setOptions([
    'maintainAspectRatio' => false,
    // ...other options
]);

Do NOT

  • Do not set width or height attributes on the <canvas> or in render_chart().
  • Do not use style attributes on the <canvas>.

See the Chart.js docs on sizing for more details.

Installation

Note: UX Chart.js requires Stimulus and AssetMapper. Make sure you have them installed first. See Using Symfony Stimulus Bundle with AssetMapper.

In your project, click Tools -> Composer packages , add the package symfony/ux-chartjs.

Then import chart.js by:

php bin/console importmap:require chart.js

AssetMapper will import the JS automatically.

Tip: If you need Chart.js plugins, import them the same way (see below).

Notes:

  1. Since the charts use inline styles, you need to enable 'unsafe-inline' for 'style-src-attr' in your CSP settings.
  2. Clear cache to make sure everything is updated.

Create a Chart in PHP

For example, in server events, you can add:

$chart = new \Symfony\UX\Chartjs\Model\Chart(\Symfony\UX\Chartjs\Model\Chart::TYPE_LINE);
$chart->setData([
    'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    'datasets' => [
        [
            'label' => 'My First dataset',
            'backgroundColor' => 'rgb(255, 99, 132)',
            'borderColor' => 'rgb(255, 99, 132)',
            'data' => [0, 10, 5, 2, 20, 30, 45],
        ],
    ],
]);
$chart->setOptions([
    'scales' => [
        'y' => [
            'suggestedMin' => 0,
            'suggestedMax' => 100,
        ],
    ],
    // To make the chart fill the parent div, add:
    // 'maintainAspectRatio' => false,
]);

// Pass your chart(s) to view
HttpContext('ViewData', [
    'chart' => $chart,
]);

Render the Chart in Twig

{{ render_chart(chart) }}

You can pass HTML attributes as a second argument to add them to the <canvas> tag:

{{ render_chart(chart, {'class': 'my-chart'}) }}

Important:
Symfony UX Chart.js sets the <canvas> width/height attributes and inline style, which override CSS. Setting explicit width and height attributes on the chart does not work as expected. To control chart size, wrap the chart in a parent <div> with the desired size.

Example:

<div style="height: 400px;">
    {{ render_chart(chart, {'class': 'my-chart'}) }}
</div>

Tip: You can also use CSS classes instead of inline styles for better maintainability.

<div class="chart-container">
    {{ render_chart(chart) }}
</div>

.chart-container {
    height: 400px;
    width: 100%;
}

Common Pitfalls & Troubleshooting

  • Chart not resizing?
    • Make sure the parent <div> has a fixed height.
    • Set 'maintainAspectRatio' => false in chart options if you want the chart to stretch.
  • CSP errors about inline styles?
    • Ensure 'unsafe-inline' is allowed for 'style-src-attr' in your CSP settings.
  • Chart.js plugin not working?
    • Make sure you imported and registered the plugin in your JS entrypoint (see below).
  • Chart not rendering at all?
    • Check browser console for JS errors.
    • Make sure you cleared Symfony cache after installing new packages.

Using Chart.js Plugins

Chart.js supports many plugins. With AssetMapper, you must import and register plugins in your JS entrypoint (e.g. assets/app.js).

For example, to use the zoom plugin:

  1. Import the plugin:

    php bin/console importmap:require chartjs-plugin-zoom

  2. Register the plugin globally in your assets/app.js:

    import zoomPlugin from 'chartjs-plugin-zoom';

document.addEventListener('chartjs:init', function (event) {
    const Chart = event.detail.Chart;
    Chart.register(zoomPlugin);
});

  3. Configure the plugin in your chart options:

    $chart->setOptions([
    'plugins' => [
        'zoom' => [
            'zoom' => [
                'wheel' => ['enabled' => true],
                'pinch' => ['enabled' => true],
                'mode' => 'xy',
            ],
        ],
    ],
]);

Learn More

Symfony UX Chart.js

1 Like