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

445.244

445.244,00€

445.244,00€

$445,244.00

$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.

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);
    }

    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

Change tooltip of Chart Widget

445.244

445.244

445.244,00€

445.244,00€

$445,244.00

$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.

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);
    }

    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

Change tooltip of Chart Widget

Change tooltip of Chart Widget

Similar Threads

Similar Threads

Similar Threads