How to implement click event or data point selection on apexCharts?

Question

I am attempting to use the apexCharts javascript library and having trouble implementing the click event I have read the documentation but there's no clear example on how to implement it.

So far I have this code.

var options = {
            chart: {
                height: 350,
                type: 'bar',
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        position: 'top', // top, center, bottom
                    },
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return val + "%";
                },
                offsetY: -20,
                style: {
                    fontSize: '12px',
                    colors: ["#304758"]
                }
            },
            series: [{
                name: 'Inflation',
                data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
            }],
            xaxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                position: 'top',
                labels: {
                    offsetY: -18,

                },
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                crosshairs: {
                    fill: {
                        type: 'gradient',
                        gradient: {
                            colorFrom: '#D8E3F0',
                            colorTo: '#BED1E6',
                            stops: [0, 100],
                            opacityFrom: 0.4,
                            opacityTo: 0.5,
                        }
                    }
                },
                tooltip: {
                    enabled: true,
                    offsetY: -35,

                }
            },
            fill: {
                gradient: {
                    enabled: false,
                    shade: 'light',
                    type: "horizontal",
                    shadeIntensity: 0.25,
                    gradientToColors: undefined,
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [50, 0, 100, 100]
                },
            },
            yaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    show: false,
                    formatter: function (val) {
                        return val + "%";
                    }
                }

            },
            title: {
                text: 'Monthly PCB Washout Occurrences, 2018',
                floating: true,
                offsetY: 320,
                align: 'center',
                style: {
                    color: '#444'
                }
            },

            active: {
                 allowMultipleDataPointsSelection: true,
            },

            events:{

                   dataPointSelection: function(event, chartContext, config){

                           console.log(event);
                       }

                }
        }

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

        chart.render();

I tried first the click event but found out that what I am looking for is the dataPointSelection method this is when a user clicks the column/bar chart it will return the event or data of the element, any idea how to implement this? any suggestion would be great!

junedchhipa · Accepted Answer · 2021-06-11T13:47:35.843

20

Your configuration for events is misplaced. You need to place events property inside chart property like this

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

Here is an updated codepen of your example.

edited Jun 11 '21 at 13:47

answered Oct 24 '18 at 15:27

junedchhipa

4,694
1
28
28

How to route to a page on click event in apex charts?? – BIJAY Jun 11 '21 at 12:24

score 9 · Answer 2 · answered Feb 12 '21 at 15:08

I think this is simply what you are looking for

chart: {
    type: 'area',
    events: {
        dataPointSelection(event, chartContext, config) {
            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
        }
    }
}

if you need by the click, this is better

chart: {
    type: 'area',
    events: {
        click(event, chartContext, config) {
            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
        }
    }
}

source How to access value on dataPointSelection function of Apexchart

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

For whatever reason I found that I had to use `config.w.config.series...` — Dylan Smith, Apr 29 '21 at 00:24

score 1 · Answer 3 · answered Jul 01 '21 at 20:10

If you need the category clicked on:

events: {
              click(event, chartContext, config) {
                let ID = config.config.xaxis.categories[config.dataPointIndex];
                handleClick("Category Name" + ID);
              },
            },

score 0 · Answer 4 · answered Jun 13 '22 at 21:23

0

events: {
  dataPointSelection: function(event, chartContext, config) {

    alert (chartContext.w.globals.labels[config.dataPointIndex] )
    // The last parameter config contains additional information like `seriesIndex` and `dataPointIndex` for cartesian charts
  }
},

answered Jun 13 '22 at 21:23

user19333171

1

While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – Saeed Zhiany Jun 15 '22 at 03:26

How to implement click event or data point selection on apexCharts?

4 Answers4

Linked