Filament•5mo 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.

13 Replies

Vp•5mo 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

MikePageDevOP•5mo 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•5mo 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

MikePageDevOP•5mo 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•5mo ago

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

MikePageDevOP•5mo ago

Thank you I must have done something wrong

Vp•5mo 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')

MikePageDevOP•5mo ago

I'm getting this error

MikePageDevOP•5mo 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•5mo 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.

MikePageDevOP•5mo 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•5mo 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

MikePageDevOP•5mo ago

I have been having a play around and posting some questions.

Gaming

Programming

Adding percentages to pie chart