I am attempting to utilize a rollup summary pie chart to filter a bar chart to only show related data to that specific pie chart category or categories. I am writing in the dataPointSelection event as some of the samples show using the histogram or bar charts and cannot get the event to fire off when selecting one of pie slices. At this point, just to test for functionality I am logging to the console. The click event triggers as expected per the documentation, however, the dataPointSelection event does not. Is there something I am missing with the pie and donut charts to determine when a user selects a pie slice category and determine what they selected?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="chartpie" style="width: 400px; height: 400px; margin: 35px auto;border-style: solid;
border-width: 1px;border: 1px solid #ddd; box-shadow: 0 22px 35px -16px rgba(0,0,0, 0.1);">
</div>
<script type="text/javascript">
let options_pie = {
chart: {
width: 400,
height: 400,
type: 'pie',
dropShadow: {
enabled: true,
blur: 8,
top: 8,
opacity: 0.1
},
events: {
dataPointSelection: function(e, chart, opts) {
console.log("Inside the dataPointSelection Event");
},
click: function(e, chart, opts) {
console.log("Inside the click Event");
}
}
},
stroke: {
width: 0
},
series: [44, 55, 41, 17, 15],
title: {
text: 'Title Text',
offsetX: 30,
style: {
fontSize: '24px'
}
},
subtitle: {
text: 'Subtitle Text',
offsetX: 30,
style: {
fontSize: '14px'
}
},
labels: ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5"]
}
let chart_pie = new ApexCharts(document.querySelector("#chartpie"), options_pie);
chart_pie.render();
</script>
<script src="apexcharts.min.js"></script>
</body>
</html>
I am attempting to utilize a rollup summary pie chart to filter a bar chart to only show related data to that specific pie chart category or categories. I am writing in the dataPointSelection event as some of the samples show using the histogram or bar charts and cannot get the event to fire off when selecting one of pie slices. At this point, just to test for functionality I am logging to the console. The click event triggers as expected per the documentation, however, the dataPointSelection event does not. Is there something I am missing with the pie and donut charts to determine when a user selects a pie slice category and determine what they selected?
Sample code below: