Filament•5mo ago

Chart widget with chart.js plugins

I'm trying to add datalabels plugin for Chart.js. I'm following this steps from the docs: https://filamentphp.com/docs/3.x/widgets/charts#using-custom-chartjs-plugins with no luck. I'm getting an Alpine error. I attached ss from widget and resources/js/filament-chart-js-plugins.js. I rebuilt assets, cleared browser cache, nothing changes. But if I comment all the code from filament-chart-js-plugins.js the error disappear

Chart widgets - Widgets - Filament

9 Replies

awcodes•5mo ago

You also need x-ignore on the ax-load element. I think Actually you’re confusing ax-load with x-load

awcodes•5mo ago

https://filamentphp.com/docs/3.x/support/assets#lazy-loading-javascript

Assets - Core Concepts - Filament

rogazthOP•5mo ago

I'm not using custom view, I'm just using a chart widget by default Should I change that to custom widget (livewire)?

awcodes•5mo ago

Ah. Sorry, looked custom. Did you miss the step about registering it with FilamentAsset?

rogazthOP•5mo ago

Nope, I've already registered 😦

rogazthOP•5mo ago

Its a fresh laravel/filament installation btw

awcodes•5mo ago

That is an unusual error though. I saw something similar the other day with x-sort where it complained about x not being defined without explicitly defining it as x-sort=“” since the browser was setting the attribute itself as x-sort=“x-sort” wonder if something changed recently in alpine.

spacedev•5mo ago

@awcodes Hi, I installed the chartjs-plugin-annotation plugin using the NPM command. When the chart widget is loaded I'm getting this error. I followed the steps indicated in the Filament Docs and registered the plugins file in the AppServiceProvider. Any suggestions?

CORONEL•4mo ago

For anybody going through this same issue while trying to use chartjs-datalabels-plugin. This is a issue with chartjs-datalabels-plugin itself, and only happen for doughnut and pie charts. I don't think anybody there will fix it, the Repo is pretty much idle. I found an alternative that 'kinda' works: chart.js-plugin-labels-dv After installing the package through npm, the .js file will be like this:

import { getChartLabelPlugin } from "chart.js-plugin-labels-dv";

window.filamentChartJsPlugins ??= [];
window.filamentChartJsPlugins.push(getChartLabelPlugin());

import { getChartLabelPlugin } from "chart.js-plugin-labels-dv";

window.filamentChartJsPlugins ??= [];
window.filamentChartJsPlugins.push(getChartLabelPlugin());

Gaming

Programming

Chart widget with chart.js plugins