[Chartjs]-Symfony UX Chart.js just display a blank square

by

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

0👍

I Had the same problem.

  1. Install Stimulus : composer require symfony/stimulus-bundle
  2. Enable Stimulus in webpack.config.js
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
  1. Import Stimulus in assets/app.js
// start the Stimulus application
import './bootstrap';
  1. 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?$/
));
  1. npm run watch

Let me know if it works.

Leave a comment