Filament•13mo ago

Custom JS for Chart Widgets to build custom tooltip

I would like to find out any best practices for adding custom JS to the chart widgets In my case I have some data from the model which I would like to show in the tooltip, I am wondering how to integrate the Alpine JS or livewire directives to build the custom toolitp Thank you in advance

3 Replies

ConnorHowell•13mo ago

Check the last example here: https://filamentphp.com/docs/3.x/widgets/charts#setting-chart-configuration-options In essence you can use the RawJs object to make use of JavaScript functions

Chart widgets - Widgets - Filament

ConnorHowell•13mo ago

use Filament\Support\RawJs;
 
protected function getOptions(): RawJs
{
    return RawJs::make(<<<JS
        {
            scales: {
                y: {
                    ticks: {
                        callback: (value) => '€' + value,
                    },
                },
            },
        }
    JS);
}

use Filament\Support\RawJs;
 
protected function getOptions(): RawJs
{
    return RawJs::make(<<<JS
        {
            scales: {
                y: {
                    ticks: {
                        callback: (value) => '€' + value,
                    },
                },
            },
        }
    JS);
}

ssmusokeOP•13mo ago

Thanks @ConnorHowell that example I saw, however I was looking to be able to do more - like have a custom function that loads livewire content for the tooltip for example

Gaming

Programming

Custom JS for Chart Widgets to build custom tooltip