F
Filament•7mo ago
rogazth

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
No description
No description
No description
No description
9 Replies
awcodes
awcodes•7mo ago
You also need x-ignore on the ax-load element. I think Actually you’re confusing ax-load with x-load
awcodes
awcodes•7mo ago
rogazth
rogazthOP•7mo 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
awcodes•7mo ago
Ah. Sorry, looked custom. Did you miss the step about registering it with FilamentAsset?
rogazth
rogazthOP•7mo ago
Nope, I've already registered 😦
No description
rogazth
rogazthOP•7mo ago
Its a fresh laravel/filament installation btw
awcodes
awcodes•7mo 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
spacedev•6mo 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?
No description
CORONEL
CORONEL•5mo 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());

Did you find this page helpful?