F
Filament•2w 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.
No description
Solution:
Ohh and for @Answer Overflow: This is how I did it: ```php protected function getOptions(): RawJs|array {...
Jump to solution
11 Replies
zydnrbrn
zydnrbrn•2w ago
i think you just modify the payload data that you put on the chart parameter
Maxi
MaxiOP•2w ago
Do you mean modifying the options data like it’s described in the Chart.js documentation? Because that‘s not working or atleast my attempts didn‘t work. Or do you mean modifying the number data itself?
toeknee
toeknee•2w ago
So look at: https://www.chartjs.org/docs/latest/samples/tooltip/content.html Then you apply the config as per say: 
    protected function getOptions(): array|RawJs|null
    {
        return [
            'indexAxis' => 'y',
            'plugins' => [
                'legend' => [
                    'display' => true,
                ],
                'tooltip' => [
                    'callbacks' => [
                    ],
                ],
            ],
        ];
    }
    protected function getOptions(): array|RawJs|null
    {
        return [
            'indexAxis' => 'y',
            'plugins' => [
                'legend' => [
                    'display' => true,
                ],
                'tooltip' => [
                    'callbacks' => [
                    ],
                ],
            ],
        ];
    }
Custom Tooltip Content | Chart.js
Open source HTML5 Charts for your website
Maxi
MaxiOP•2w ago
Yes, I did this but then I only get JS errors like: Uncaught TypeError: a.label.call is not a function And I'm using the exact code/function example from the Chart.js documentation: 
            'plugins' => [
                'tooltip' => [
                    'callbacks' => [
                        'label' => RawJs::make(<<<'JS'
                    function(context) {
                        let label = context.dataset.label || '';

                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                        }
                        return label;
                    }
                    JS),
                    ],
                ],
            ],
            'plugins' => [
                'tooltip' => [
                    'callbacks' => [
                        'label' => RawJs::make(<<<'JS'
                    function(context) {
                        let label = context.dataset.label || '';

                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                        }
                        return label;
                    }
                    JS),
                    ],
                ],
            ],
toeknee
toeknee•2w ago
Did you use AI for that.... I think you need to tell it to call a pre-defined function on the page to process the value
Maxi
MaxiOP•2w ago
Nope, I got it from here: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback
Tooltip | Chart.js
Open source HTML5 Charts for your website
Maxi
MaxiOP•2w ago
Where exactly would I put this function in my Filament project, like is there an intended way of providing custom JavaScript to certain pages?
toeknee
toeknee•2w ago
in a custom app.js I would assume. But I've not done it yet.
toeknee
toeknee•2w ago
Maxi
MaxiOP•2w ago
Got it I just made the whole options RawJs and it worked like a charm. 👍 Thanks for the help <3
Solution
Maxi
Maxi•2w ago
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);
    }
    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);
    }

Did you find this page helpful?