CODEWITHSUNDEEP
javascriptvuejs2apexcharts
mikeb
mikeb

Reputation: 11287

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

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??

Upvotes: 1

Views: 1704

Answers (1)

Oscar Schafer
Oscar Schafer

Reputation: 1535

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.

Upvotes: 3

Related Questions