Symfony UX Chart.js just display a blank square

Question

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

The chart configuration is OK, this fiddle is made from the value in your data-symfony--ux-chartjs--chart-view-value. I see that A and B are at a distance, but can you make sure in Chrome inspect that there's actually a canvas element inside the div with the same height? — kikon
– kikon, Commented Jun 15, 2023 at 14:07

vodevel · Accepted Answer · 2023-06-16 09:37:29Z

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

answered Jun 16, 2023 at 9:37

vodevel

5062 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jean François Manatane Over a year ago

OK so actually the issue was in the webpack. config.js The path in setPublicPath was absolute .setPublicPath('/public/build') I changed to the full path .setPublicPath('/symfonyapp/public/build') But this is ridiculous. I should not have to do that. It should get the full path by itself..

vodevel Over a year ago

From my webpack.config.js: ``` .setOutputPath('public/build/') .setPublicPath('/build')```

MushuLeDragon · Accepted Answer · 2023-08-29 16:35:30Z

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.

Gregoire Ducharme · Accepted Answer · 2024-02-17 06:29:13Z

0

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

edited Feb 17, 2024 at 6:29

Gregoire Ducharme

1,10514 silver badges27 bronze badges

answered Feb 11, 2024 at 14:18

Audrey

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

kamil s · Accepted Answer · 2024-12-12 17:04:47Z

0

The problem is apparently @hotwired/stimulus ^3.0. It may be required directly in package.json or e.g. by the new version of stimulus-use. I removed it from package.json and updated the stimulus-use: ^0.24.0-1. After yarn install --force everything works as it should.

edited Dec 12, 2024 at 17:04

answered Dec 12, 2024 at 17:04

kamil s

12 bronze badges

Collectives™ on Stack Overflow

Symfony UX Chart.js just display a blank square

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related