dataPointSelection event not working for pie and donut chart types

[apexcharts]

dataPointSelection event not working for pie and donut chart types

[junedchhipa]

Thanks for the feedback. I think as it's deeply nested in the chart object, it might be difficult to find.
https://apexcharts.com/docs/options/chart/events/

I will add link to it in the main events page

[FightRay]

Hey @junedchhipa , I am aware of this link and I have already seen it before. What I meant is that I have this object called chartOptions which contains the options for the chart, so I tried placing the events array in there, on the same level as colors and labels. It was not clear that I had to create another object named chart and put it in there.
The way to make the chart options object should be more clear in my opinion, that is all. Thank you and good job with the project.

chartOptions: {
                    chart: {
                        height: 350,
                        type: 'pie',
                        events: {
                            dataPointSelection: function (event, chartContext, config) {
                                console.log("test dps");
                            }
                        }
                    },

                    labels: ['Slice1', 'Slice2', 'Slice3'],
                    colors: ['#fff', '#000', '#00e396']
                },

[junedchhipa]

Understood! Yeah, that might be confusing.
Maybe providing a full config example for React/Vue would be a good idea for such nested properties.

[junedchhipa]

You didn't miss anything, I missed the dataPointSelection event for pie/donut charts.
Just pushed the latest fix, it should work now

[FightRay]

Hey there, I installed Vue apex charts from npm yesterday. Click events still won't work on pie chart types...

[junedchhipa]

@FightRay Can you post a codepen of what have you tried, please?

[FightRay]

@junedchhipa Yeah, sure thing. Here's what I'm trying to do

I have this in my Vue component's data array
`series: [44, 55, 13],
chartOptions: {

                labels: ['part1', 'part2', 'part3'],
                colors: ['#007bff', '#00b0f0', '#00e396'],
                responsive: [{
                        breakpoint: 480,
                        options: {
                            chart: {
                                width: 200,
                                events: {
                                    click: function (event, chartContext, config) {
                                        console.log("test click");
                                    },
                                    dataPointSelection: function (event, chartContext, config) {
                                        console.log("test dps");
                                    }
                                }
                            },
                            legend: {
                                position: 'top',
                                horizontalAlign: 'center'
                            }
                        }
                    }]
            }`

And in the HTML:

<div id="chart-container"> <chart width="500" height="300" type="pie" :options="chartOptions" :series="series"></chart> </div>

The pie is showing fine, when I select a part of the pie none of the events are firing. I tried moving the events array to chartOptions as well and basically everywhere else, and nothing is working. Sorry for not posting the code in CodePen, I'm not very familiar with setting it up.

I noticed in the DOM that the part of the pie I select gets a new "selected = true" attribute, and when unselecting it or selecting a different part of the pie it sets "selected" to false. So I intercepted it this way

console.log(document.getElementById("apexcharts-pieSlice-0").getAttribute("selected")); console.log(document.getElementById("apexcharts-pieSlice-1").getAttribute("selected")); console.log(document.getElementById("apexcharts-pieSlice-2").getAttribute("selected"));

If I get NULL for an attribute I make it false, or else, I take the attribute's value. But obviously it's not the right way to do it since it's only working after the pie has been rendered and I have no way of knowing when it finished rendering.
Waiting for your reply, thanks.

[FightRay]

@junedchhipa Hey, any updates on this?

[junedchhipa]

@FightRay The events are firing correctly
I created a codepen to illustrate the config - https://codepen.io/apexcharts/pen/aXGoOb

[FightRay]

@junedchhipa Thank you, got it working. I wasn't sure as to where to place the events array since there's no documentation for it whatsoever in the website.

[jonathanoeijoeng]

I know it's old thread but I want to ask about it in vuejs
I have put
chart: { type: "donut", events: { click: function (event, chartContext, config) { console.log(config); }, dataPointSelection: function (event, chartContext, config) { console.log("test dps"); }, }, },
but when I click on chart, nothing happen. This script works well in bar chart
Do I miss something?

[mrksoftware]

What about radar chart? can we use dataPointSelection there?
I tried and nothing happens, and also the documentation seems to suggest it is not supported..

Is it supposed to be done in a different way or can the event be added also there?