How to access value on dataPointSelection function of Apexchart

Question

How can i access the data value of a Apex Chart by clicking the tooltip?

I dont want the index. i need the value. How can i access the value?

<script>
var options = {
    chart: {
        type: 'line',
        events: {
            dataPointSelection: function (event, chartContext, config) {
                console.log(config);
                var ix = config.dataPointIndex;

                alert(ix);

            }
        }
    },
    series: [{
        name: 'TEST',
        data: [[1324508400000, 34], [1324594800000, 54], [1325604800000, 39] , [1326236400000, 43]]
    }],
    xaxis: {

    },
    tooltip: {
        intersect: true,
        shared: false
    },
    markers: {
        size: 6,
    }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
</script>

score 5 · Answer 1 · answered Oct 13 '19 at 03:46

5

This worked for me:

dataPointSelection: (event, chartContext, config) => {
  console.log(config.w.config.series[config.dataPointIndex])
  console.log(config.w.config.labels[config.dataPointIndex])
}

codesandbox

answered Oct 13 '19 at 03:46

Mike

384
7
16

score 2 · Answer 2 · answered Mar 20 '20 at 05:21

2

You can use function click

click(event, chartContext, config) {
            console.log(config.seriesIndex);
            console.log(config.dataPointIndex); 
}

https://apexcharts.com/docs/options/chart/events/

answered Mar 20 '20 at 05:21

Shinji Beta

21
1
4

score 1 · Answer 3 · answered Sep 09 '21 at 19:51

An update / extension of the solution, for a Pie chart:

chart: {
    ...
    type: 'pie',
    events: {
        dataPointSelection: function(event, chartContext, config) {
            console.log(config.w.config.labels[config.dataPointIndex]);
            console.log(config.w.config.series[config.dataPointIndex]);
        }
    }
},
...

For a Donut chart:

chart: {
    ...
    type: 'donut',
    events: {
        dataPointSelection: function(event, chartContext, config) {
            console.log(config.w.config.labels[config.dataPointIndex]);
            console.log(config.w.config.series[config.dataPointIndex]);
        }
    }
},
...

For a Bar chart:

chart: {
    ...
    type: 'bar',
    events: {
        dataPointSelection: function(event, chartContext, config) {    
       console.log(config.w.config.xaxis.categories[config.dataPointIndex]);
            console.log(config.w.config.series[0].data[config.dataPointIndex]);
        }
    }
},
...

Sorry for the indentation of this last snip, the publishing tool behaves weird with long lines of code.

How to access value on dataPointSelection function of Apexchart

3 Answers3

Linked