Symfony UX Chart.js just display a blank square

Question

Symfony UX Chart.js just display a blank square

825 Views Asked by Jean François Manatane At 08 April 2025 at 22:21

I have followed the official tutorial to get my chart on symfony : https://symfony.com/bundles/ux-chartjs/current/index.html

But the chart does not display, it is just blank. I head that it may be caused by an old version of Encore or Symfony UX Chart.js but they are all up to date :

Encore is up to date : Using version ^2.0 for symfony/webpack-encore-bundle

UX Chart.js is up to date :Using version ^2.9 for symfony/ux-chartjs

Stimulus is up to date :Using version ^2.9 for symfony/stimulus-bundle

I Ran npm run watch :

> watch> encore dev --watch
Running webpack ...
 DONE  Compiled successfully in 3085ms                                                                                                               7:43:59 PM
5 files written to public/buildEntrypoint app [big] 1.75 MiB = runtime.js 14.6 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-chartjs_di-bb5774.js 1.71 MiB app.css 741 bytes app.js 23.2 KiBwebpack compiled successfully

The code of my control is basically the same that the code on the tutorial :

$chart = $chartBuilder->createChart(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,
                ],
            ],
        ]);

        return $this->render('graph.html.twig', ['chart' => $chart]);

And here is the content of my twig :

{% extends 'armature.html.twig' %}

{% block contenu %}

<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800">Graphiques</h1>

A
<div>
{{ render_chart(chart) }}
</div>
B

Here is the HTML generated :

<canvas data-controller="symfony--ux-chartjs--chart" data-symfony--ux-chartjs--chart-view-value="{&quot;type&quot;:&quot;line&quot;,&quot;data&quot;:{&quot;labels&quot;:[&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;My First dataset&quot;,&quot;backgroundColor&quot;:&quot;rgb(255, 99, 132)&quot;,&quot;borderColor&quot;:&quot;rgb(255, 99, 132)&quot;,&quot;data&quot;:[0,10,5,2,20,30,45]}]},&quot;options&quot;:{&quot;scales&quot;:{&quot;y&quot;:{&quot;suggestedMin&quot;:0,&quot;suggestedMax&quot;:100}}}}"></canvas>

But it just display nothing.

I added on my twig but it is the same.

I don't see any errors or warning in the Chrome console.

Any ideas? I'm a bit lost.

Thanks

Original Q&A

There are 3 best solutions below

**vodevel** · Answer 1

This happens when the page does not include scripts that will process the canvas. Try this code for graph.html.twig:

<!DOCTYPE html>
<html>
<head>
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
    {% endblock %}

    {% block javascripts %}
        {{ encore_entry_script_tags('app') }}
    {% endblock %}
</head>
<body>
{{ render_chart(chart) }}
</body>
</html>

If that doesn't work, you can try remove the packages and require them again, making sure that you don't get errors when applying their recipes. Something like this:

composer require symfony/ux-chartjs
composer require symfony/webpack-encore-bundle
yarn install
yarn encore dev

**Audrey** · Answer 2

I had the exact same issue.

I tried every comments on this page and it was still not working. So in addition I run yarn add chartjs in my terminal and it worked.

I am not a pro so I don't know if it is really clean but at least my problem is gone. Maybe yours will be too

**MushuLeDragon** · Answer 3

I Had the same problem.

Install Stimulus : composer require symfony/stimulus-bundle
Enable Stimulus in webpack.config.js

// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')

Import Stimulus in assets/app.js

// start the Stimulus application
import './bootstrap';

Import Stimulus in assets/bootstrap.js

import { startStimulusApp } from '@symfony/stimulus-bridge';

// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.[jt]sx?$/
));

npm run watch

Let me know if it works.

Symfony UX Chart.js just display a blank square

There are 3 best solutions below

Related Questions in SYMFONY

Related Questions in CHART.JS

Related Questions in SYMFONYUX

Trending Questions

Popular # Hahtags

Popular Questions