apexcharts with vue - pie chart seriesIndex and dataPointIndex are -1 for click

Question

I'm using Vue apexcharts and whenever I click on a Pie chart I have this:

options: {
          chart: {
            events: {
              click:
                  (event: any, chartContext: any, config: any) => {
                    console.log('Clicked', chartContext);
                    console.log('Event', event);
                    console.log('Config', config);
                  }
            },
          },

In the console, config.seriesIndex and config.dataPointIndex are always -1 - How do I get the value of the pie slice I clicked on? Index/label/whatever??

Answer 1

To get a reference to a pie slice clicked on you'll want to use the dataPointSelection function instead. This allows you to get the config.seriesIndex and config.dataPointIndex in the way which you've tried.

options: {
          chart: {
            events: {
              dataPointSelection:
                  (event, chartContext, config) => {
                    console.log('seriesIndex', config.seriesIndex);
                    console.log('dataPointIndex', config.dataPointIndex);
                  }
            },
          },
},

The click function fires when a user clicks anywhere on the chart and is not intended to be used to extract data about user interaction with specific data points.