dataPointSelection event not working for pie and donut chart types

I am attempting to utilize a rollup summary pie chart to filter a bar chart to only show related data to that specific pie chart category or categories. I am writing in the dataPointSelection event as some of the samples show using the histogram or bar charts and cannot get the event to fire off when selecting one of pie slices. At this point, just to test for functionality I am logging to the console. The click event triggers as expected per the documentation, however, the dataPointSelection event does not. Is there something I am missing with the pie and donut charts to determine when a user selects a pie slice category and determine what they selected?

Sample code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="chartpie" style="width: 400px; height: 400px; margin: 35px auto;border-style: solid;
    border-width: 1px;border: 1px solid #ddd; box-shadow: 0 22px 35px -16px rgba(0,0,0, 0.1);">
</div>

<script type="text/javascript">
    let options_pie = {
      chart: {
          width: 400,
          height: 400,
          type: 'pie',
          dropShadow: {
            enabled: true,
            blur: 8,
            top: 8,
            opacity: 0.1
          },
          events: {
            dataPointSelection: function(e, chart, opts) {
              console.log("Inside the dataPointSelection Event");
            },
            click: function(e, chart, opts) {
                console.log("Inside the click Event");
            }
          }
      },
      stroke: {
        width: 0
      },
      series: [44, 55, 41, 17, 15],
      title: {
          text: 'Title Text',
          offsetX: 30,
          style: {
            fontSize: '24px'
          }
        },
        subtitle: {
          text: 'Subtitle Text',
          offsetX: 30,
          style: {
            fontSize: '14px'
          }
        },
        labels: ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5"]
    }

    let chart_pie = new ApexCharts(document.querySelector("#chartpie"), options_pie);
    chart_pie.render();

  </script>
  <script src="apexcharts.min.js"></script>
</body>
</html>

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

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

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

@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>`

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.

@junedchhipa Hey, any updates on this?

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

@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.

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

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']
                },

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

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?

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?

hello @junedchhipa . i have been working on my project and im using apex chart, but the datapointselection and other events are not working except for xaxislabel on bar chart, do you have any suggestion ?

apexcharts / apexcharts.js

dataPointSelection event not working for pie and donut chart types #54