Filament•4d ago

Adding percentages to pie chart

I am using the built-in chart widgets. I would like to add percentages to a pie chart (see image). I have looked over the Chart.js docs, but I can't figure out how to do it.

12 Replies

Vp•4d ago

https://stackoverflow.com/a/72882864/8826120 Not tested, but you can put inside options.plugins.datalabels.formatters.** like this https://filamentphp.com/docs/3.x/widgets/charts#setting-chart-configuration-options

MikePageDev•4d ago

Hi, thanks for the tip, but I still can't get it working. Here are the two options I have tried. In the first one, the chart didn't render.

 protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    y: {
                        grid: {
                            display: false,
                        },
                        ticks: {
                            display: false,
                        },
                    },
                    x: {
                        ticks: {
                            display: false,
                        },
                    },
                },
                plugins: {
                    datalabels: {
                        formatters: (value) => 'hello' + value;
                    },
                },
            }
        JS);
    }

 protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    y: {
                        grid: {
                            display: false,
                        },
                        ticks: {
                            display: false,
                        },
                    },
                    x: {
                        ticks: {
                            display: false,
                        },
                    },
                },
                plugins: {
                    datalabels: {
                        formatters: (value) => 'hello' + value;
                    },
                },
            }
        JS);
    }

return RawJs::make(<<<JS
            {
                scales: {
                    y: {
                        grid: {
                            display: false,
                        },
                        ticks: {
                            display: false,
                        },
                    },
                    x: {
                        ticks: {
                            display: false,
                        },
                    },
                },
                plugins: {
                    datalabels: {
                        formatters: function (value) {
                            return 'hello' + value;
                        },
                        color: '#fff',
                    },
                },
            }
        JS);

return RawJs::make(<<<JS
            {
                scales: {
                    y: {
                        grid: {
                            display: false,
                        },
                        ticks: {
                            display: false,
                        },
                    },
                    x: {
                        ticks: {
                            display: false,
                        },
                    },
                },
                plugins: {
                    datalabels: {
                        formatters: function (value) {
                            return 'hello' + value;
                        },
                        color: '#fff',
                    },
                },
            }
        JS);

For the last one, the chart was rendered, but there was no label.

Vp•4d ago

By reading more on docs, I think you need to do like this https://filamentphp.com/docs/3.x/widgets/charts#using-custom-chartjs-plugins

Chart widgets - Widgets - Filament

MikePageDev•4d ago

Ah, ok, so it looks like a separate plugin. OK, I will give this a go. I have gone through the steps in the docs, but still no luck

Vp•4d ago

will try to replicate when I have time, now no idea anymore

MikePageDev•4d ago

Thank you I must have done something wrong

Vp•4d ago

Do you have console error? For me my test stop because of console error Alpine Expression Error: Cannot read properties of null (reading 'x')

MikePageDev•4d ago

I'm getting this error

MikePageDev•21h ago

I was just wondering if there are any more thoughts on this. Update: The data label package works fine on the line chart but doesn't seem to work on the pie chart. Does anyone have any idea why this might be?

LeandroFerreira•19h ago

If you want to try apexcharts https://filamentphp.com/plugins/leandrocfe-apex-charts https://apexcharts.com/javascript-chart-demos/pie-charts/simple-pie-chart/

Filament

Apex Charts by Leandro Ferreira - Filament

Apex Charts integration for Filament.

ApexCharts.js

Basic Pie Chart Example in React.js – ApexCharts.js

VIew the sample demo of a basic Pie Chart created in react-apexcharts.

MikePageDev•17h ago

I used this for a pie chart a little while ago. I had trouble trying to fire a livewire event on click. Has that been improved?

LeandroFerreira•17h ago

I don't know what you are trying to do, but feel free to try it again.. if you have questions, post here please #leandrocfe-apex-charts

Gaming

Programming

Adding percentages to pie chart