Closed RosiersRobin closed 7 months ago
Hi,
How can I make use of the datalabel formatter?
I have the following array I return;
return [ 'chart' => [ 'type' => 'bar', 'height' => 300, 'animations' => [ 'enabled' => false ], ], 'series' => [ [ 'name' => 'Sales', 'data' => $totalSoldByProduct->pluck('total_revenue')->toArray(), ], ], 'xaxis' => [ 'categories' => $totalSoldByProduct->pluck('name')->toArray(), 'labels' => [ 'style' => [ 'colors' => '#9ca3af', 'fontWeight' => 600, ], ], ], 'yaxis' => [ 'labels' => [ 'style' => [ 'colors' => '#9ca3af', 'fontWeight' => 600, ], ], ], 'dataLabels' => [ 'enabled' => true, 'formatter' => 'function(val, opts) { return "Sold " + val; }', 'style' => [ 'colors' => ['#fff'], ], ], 'colors' => ['#1da6e7'], ];
As you see, there is a formatter;
'formatter' => 'function(val, opts) { return "Sold " + val; }',
But this does not work? How can I achieve this to work?
Hi! We can't use the formatter function in the current version. I have plans to include it in the next version. Maybe you can transform it in you query or using a map function
@leandrocfe we need the 'formatter' function. cause when we try to pass the time value in the y-axis it's not showing the y-axis label correctly.
@leandrocfe we need the 'formatter' function. cause when we try to pass the time value in the y-axis it's not showing the y-axis label correctly.
If it is urgent, you can publish the views and customize what you want. I have plans to do it but now I don't know when.
Could adding something like this into chart.blade be a viable default alternative?
initChart: function(options = null) {
options = options ?? @js($getCachedOptions)
if (options.dataLabels && options.dataLabels.formatter) {
options.dataLabels.formatter = eval(options.dataLabels.formatter)
}
if (options.yaxis && options.yaxis.labels && options.yaxis.labels.formatter) {
options.yaxis.labels.formatter = eval(options.yaxis.labels.formatter)
}
if (options.xaxis && options.xaxis.labels && options.xaxis.labels.formatter) {
options.xaxis.labels.formatter = eval(options.xaxis.labels.formatter)
}
if (this.darkModeEnabled) {
options.theme.mode = this.mode
}
this.chart = new ApexCharts(document.querySelector('#{{ $chartId }}'), options)
return this.chart.render()
}
And in the options array of the widget:
'yaxis' => [
'labels' => [
'formatter' => '(val, index) => {
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}',
],
],
We managed to do it this way, if you think this could be a viable approach I can review with all the other available formats and send a PR.
hello, is there any updates yet ? thanks
I fixed myself by changing the view file. In my case i have 4 widgets in a page and i just to need to format currency only for Piechart widget, so i am done the following.
protected static string $chartId = "XXXXX"; \\ if you have multiple chart widget, then this will help you only changes
chart.blade.php
file.@if($chartId === 'XXXXX')
console.log('rendered Options', options);
let tmpOptions = options;
tmpOptions.yaxis = {
labels: {
formatter: (value) => {
if (typeof value !== 'undefined') {
let USDollar = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
return USDollar.format(value);
} else {
return null;
}
}
}
};
this.chart = new ApexCharts(document.querySelector('#{{ $chartId }}'), tmpOptions)
@else
this.chart = new ApexCharts(document.querySelector('#{{ $chartId }}'), options)
@endif
$wire.on('updateOptions', async ({ options }) => {
@if($chartId === 'XXXXX')
console.log('updateOptions', JSON.parse(options));
let tmpOptions = JSON.parse(options);
tmpOptions.yaxis = {
labels: {
formatter: (value) => {
if (typeof value !== 'undefined') {
let USDollar = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
return USDollar.format(value);
} else {
return null;
}
}
}
};
this.chart.updateOptions(tmpOptions, true, true, true);
@else
this.chart.updateOptions(options, false, true, true);
@endif
});
I hope someone need this!
My fix for latest version goes like this.
php artisan vendor:publish --tag="filament-apex-charts-views"
chart.blade.php
Change init()
:
init() {
this.$wire.$on('updateOptions', ({ options }) => {
if (options.dataLabels?.formatter) {
options.dataLabels.formatter = eval(options.dataLabels.formatter)
}
if (options.yaxis?.labels?.formatter) {
options.yaxis.labels.formatter = eval(options.yaxis.labels.formatter)
}
if (options.xaxis?.labels?.formatter) {
options.xaxis.labels.formatter = eval(options.xaxis.labels.formatter)
}
this.chart.updateOptions(options, false, true, true);
});
this.options.theme = { mode: this.theme };
this.options.chart.background = 'inherit';
if (this.options.dataLabels?.formatter) {
this.options.dataLabels.formatter = eval(this.options.dataLabels.formatter)
}
if (this.options.yaxis?.labels?.formatter) {
this.options.yaxis.labels.formatter = eval(this.options.yaxis.labels.formatter)
}
if (this.options.xaxis?.labels?.formatter) {
this.options.xaxis.labels.formatter = eval(this.options.xaxis.labels.formatter)
}
this.chart = new ApexCharts($refs.{{ $chartId }}, this.options);
this.chart.render();
}
Since the latest version, the fix from @KostasKostogloy doesn't work anymore, because the init() is gone now from the views...
Any updates, when the formatter will be supported or what workaround is suggested now?
Since the latest version, the fix from @KostasKostogloy doesn't work anymore, because the init() is gone now from the views...
Any updates, when the formatter will be supported or what workaround is suggested now?
I've similar issue, just publish all blade files using the old ones (before last update), and manually load apexchart asset inside AppServiceProvider using this command
FilamentAsset::register([
Js::make('apexcharts', __DIR__.'/../../resources/js/apexcharts.min.js'),
], package: 'leandrocfe/filament-apex-charts');
blade files that i've published (using the old ones)
And with the old blade files, you can try the old workaround for Datalabel formatter by @KostasKostogloy
I've submitted a PR for review which adds this functionality. See #55
If you want to use it now, you can simply put the view in resources/views/vendor/filament-apex-charts/widgets/components/chart.blade.php
.
I've submitted a PR for review which adds this functionality. See #55
If you want to use it now, you can simply put the view in
resources/views/vendor/filament-apex-charts/widgets/components/chart.blade.php
.
Thank you so much! ❤️
My PR was incorrect. I've taken a different approach, which leaves the view intact and instead updates the distributed JS.
To use before being merged you can copy the built JS file to your public/js/app/components/apexcharts.js
.
Hey,
@RosiersRobin, @flolanger, @VictorCano, @webtamizhan, @aldesrahim
Could you try the new version please? https://github.com/leandrocfe/filament-apex-charts/tree/3.1.0
Formatter is available here https://github.com/leandrocfe/filament-apex-charts?tab=readme-ov-file#extra-options-and-formatters
Hi,
How can I make use of the datalabel formatter?
I have the following array I return;
As you see, there is a formatter;
But this does not work? How can I achieve this to work?