FilamentF
Filament•11mo ago
Maxi

Change tooltip of Chart Widget

Does anyone know how I can change the tooltip of my chart widgets? I'm not using ApexCharts but just the regular Chart.js provided by Filament. I can't seem to find a working solution and I was wondering if anyone has maybe already done this and could provide a solution/some information on how to do this.

What I want to do is to transform the data displayed in the tooltip into a currency value i.e. 445.244 to 445.244,00€ or $445,244.00 but it just doesn't want to work. I can provide some of my attempts of doing this, but I doubt they'll be helpful.
image.png
Solution
Ohh and for @Answer Overflow:
This is how I did it:
    protected function getOptions(): RawJs|array
    {
        $js = <<<'JS'
{
        responsive: true,
        maintainAspectRatio: false,
        aspectRatio: 1,
        plugins: {
                tooltip: {
                        enabled: true,
                        intersect: false,
                        callbacks: {
                                label: function(context) {
                                        let label = context.dataset.label || '';
                                        const value = context.raw || 0;
                                        return ' ' + label + ': ' + value.toLocaleString('de-DE', {style: 'currency', currency: 'EUR'});
                                },
                        }
                },
        },
}
JS;

        return RawJs::make($js);
    }
Jump to solution
Was this page helpful?