[Chart.JS] Plugins ignored when using PHP generated charts

[Matoto951]

So I followed this documentation to add Chart.JS to my application.

It works great, but I tried adding the datalabels plugin and I've never been able to make it work. I even tried to install the zoom plugin exactly like the documentation's example and still nothing.

So my last resort was to try using it directly in a stimulus controller and it worked!

Here's a screenshot of my testings:

Here's my assets/app.js file:

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

import Chart from 'chart.js/auto'
import ChartDataLabels from 'chartjs-plugin-datalabels'

Chart.register(ChartDataLabels);

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';


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

import './turbo/turbo-helper';

Here's my PHP method that generates my chart:

public function getDiscussionChart($discussion_stats)
	{
		return $this->chartBuilder->createChart(Chart::TYPE_PIE)->setData([
			'labels' => [
				'2010', '2011', '2012', '2013', '2014', '2015', '2016'
			],
			'datasets' => [
				[
					'data' => [
						10, 20, 15, 25, 22, 30, 28
					]
				]
			]
		]);
	}

Here's my Stimulus controller that works with the datalabels plugin:

import { Controller } from '@hotwired/stimulus';
import Chart from 'chart.js/auto'

export default class extends Controller {
    connect() {

        const data = [
            { year: 2010, count: 10 },
            { year: 2011, count: 20 },
            { year: 2012, count: 15 },
            { year: 2013, count: 25 },
            { year: 2014, count: 22 },
            { year: 2015, count: 30 },
            { year: 2016, count: 28 },
        ];

        new Chart(
            this.element,
            {
                type: 'pie',
                data: {
                    labels: data.map(row => row.year),
                    datasets: [
                        {
                            label: 'Acquisitions by year',
                            data: data.map(row => row.count)
                        }
                    ]
                }
            }
        );
    }
}

I'm clueless of how to solve this issue. Any help would be greatly appreciated!

[weaverryan]

Hi!

I haven't been able to repeat this for the life of me. But, I just did. Are you using npm? It appears to be an npm-specific problem. I'm checking into it.