CODEWITHSUNDEEP
reactjsapexcharts
jim
jim

Reputation: 1126

Click event with react-apexcharts

I'm using react-apexcharts and I want to add an event on a pie chart once users click on one of the sections. Here is my chart:

<div className="pie">
    <Chart options={{
        labels: [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
        ],
        theme: {
            monochrome: {
                enabled: false
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: "100%"
                },
                legend: {
                    show: false
                }
            }
        }]
    }}
    colors={["#1B2260"]}
    series={[44, 55, 41, 17, 15]}
    labels={["Apple", "Mango", "Orange", "Watermelon"]}
    type="pie"
    width="300" />
</div>

When users click on the "Apple" section, I want to print "Apple". This is the best documentation I can find for the click event but I can't get it to work.

Any help would be great! Thanks

Upvotes: 5

Views: 12733

Answers (2)

Darpan Rangari
Darpan Rangari

Reputation: 1570

here is the working example of your code

You can use dataPointSelection event to which is fired when clicked of any datapoint.

As per the doc on apexCharts:

dataPointSelection Fires when user clicks on a datapoint (bar/column/marker/bubble/donut-slice). The third argument, in addition to the config object, also includes additional information like which dataPointIndex was selected of which series. If you have allowMultipleDataPointsSelection enabled, the third argument includes selectedDataPoints property to get all selected dataPoints.

In your case you have to add and new property under options:

chart: {
    events: {
    dataPointSelection: (event, chartContext, config) => { 
        // this will print mango, apple etc. when clicked on respective datapoint
        console.log(config.w.config.labels[config.dataPointIndex])}
    }
}

Hope this helps, Happy coding

Upvotes: 8

Diegolml
Diegolml

Reputation: 156

Try adding this to your options object:

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

Upvotes: 14

Related Questions