Filament•6mo 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•6mo 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•6mo 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•6mo 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•6mo 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•6mo ago

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

MikePageDevOP•6mo ago

Thank you I must have done something wrong

Vp•6mo 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•6mo ago

I'm getting this error

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

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

Gaming

Programming

Adding percentages to pie chart