Chart.js plugin support, chartjs-plugin-annotation not load.

[lam0819]

In my case,
I want to use chartjs plugin, chartjs-plugin-annotation and chartjs-plugin-datalabels.

1. originally designed, the filament chart widget cannot add the plugin.
2. I extend a new blade to support the plugin
3. finally, I can add "plugins: [ChartDataLabels]", it shows correctly.
4. however, I figure out that chartjs-plugin-annotation is not work under "alpinejs" + "livewire"

is there any idea why this happen?

Here is the code.

`<x-filament::widget class="filament-widgets-chart-widget2">
x-filament::card

    @once
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/2.0.1/chartjs-plugin-annotation.min.js">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    @endonce


    <div class="w-full">
        <canvas id="myChart" class="rounded-lg bg-white p-8"></canvas>
    </div>
    <script>
        const options = {
            plugins: {
                autocolors: false,
                annotation: {
                    annotations: {
                        line1: {
                            type: 'line',
                            yMin: 60,
                            yMax: 60,
                            borderColor: 'rgb(255, 99, 132)',
                            borderWidth: 2
                        },
                        label1: {
                            type: 'label',
                            xValue: 2.5,
                            yValue: 60,
                            backgroundColor: 'rgba(245,245,245)',
                            content: ['This is my text', 'This is my text, second line'],
                            font: {
                                size: 18
                            }
                        }
                    }
                }
            }
        };
        const config = {
            plugins: [ChartDataLabels],
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1,
                    datalabels: {
                        color: 'red'
                    }
                }]
            },
            options
        };

        const myChart = new Chart('myChart', config);
        // const myChart2 = new Chart('chart2', config);
    </script>


    <div wire:ignore   x-data="{
        init() { let chart = new Chart('chart2', config); }
    }" class="w-full">
        <canvas id="chart2" class="rounded-lg bg-white p-8"></canvas>
    </div>

    <div wire:ignore   x-data="{
        init() { let chart = new Chart(this.$refs.canvas.getContext('2d'), config); }
    }" class="w-full">
        <canvas x-ref="canvas" class="rounded-lg bg-white p-8"></canvas>
    </div>


</x-filament::card>

</x-filament::widget>
`

here is the result

[stockiNail]

@lam0819 have a look to this issue: chartjs/chartjs-plugin-annotation#960 (comment)

CHartJS plugin annotation needs to be registered (see readme https://github.com/chartjs/chartjs-plugin-annotation and doc https://www.chartjs.org/chartjs-plugin-annotation/3.1.0/guide/)

@danharrin in this comment #4182 (comment) you are reporting this is not a filament bug. I agree but there is partial documentation how to register the Chart.js plugins. In the doc, you are assuming that all plugins are inline plugins and that's not true. Like the annotation plugins (but there are others) there are plugins which need to be registered and NOT add to the array as reported on the doc (https://filamentphp.com/docs/3.x/widgets/charts#step-2-create-a-javascript-file-importing-the-plugin):

window.filamentChartJsPlugins.push(...)

In case of inline plugin, in file filament-chart-js-plugins.js:

import ChartDataLabels from 'chartjs-plugin-datalabels'
 
window.filamentChartJsPlugins ??= []
window.filamentChartJsPlugins.push(ChartDataLabels)

In case of global plugins, in file filament-chart-js-plugins.js:

import annotationPlugin from 'chartjs-plugin-annotation';
import { Chart } from 'chart.js';

Chart.register(annotationPlugin);

In case of mixed plugins, in file filament-chart-js-plugins.js:

import ChartDataLabels from 'chartjs-plugin-datalabels'
import annotationPlugin from 'chartjs-plugin-annotation';
import { Chart } from 'chart.js';

Chart.register(annotationPlugin);
 
window.filamentChartJsPlugins ??= []
window.filamentChartJsPlugins.push(ChartDataLabels) // <--- ONLY inline Chart,js plugins

[alexjustesen]

@stockiNail what else did you do to get the plugins to work? I've got them being bundled with Vite and I'm registering the js file in my FilamentServiceProvider.

import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
import zoomPlugin from 'chartjs-plugin-zoom';

Chart.register(annotationPlugin);
Chart.register(zoomPlugin);

FilamentAsset::register([
    Js::make('chartjs-plugins', Vite::asset('resources/js/chartjs-plugins.js'))->module(),
]);

Best I can tell in the dashboard using the default chartjs widgets the plugins aren't loaded/recognized, I'm not getting any errors either in the console.

[stockiNail]

@alexjustesen let me say that I'm not a filament user therefore I don't know how it works in details. In the issue that I reported above, another user of filament and annotation plugin had a problem and having a look to the code base of filament I have seen that wrong Chart js plugins registration.

That said, following the filament doc, it seems you are doing it is correct (even if the vite config is not posted but I assume it is correct).

Can you report the chart options you are using in the charts? I don't think the issue is over there but at least we could be sure.