Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

dataPointSelection event not working for pie and donut chart types

See original GitHub issue

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:

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

Issue Analytics

State:
Created 5 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

1reaction

junedchhipacommented, Feb 11, 2019

Understood! Yeah, that might be confusing. Maybe providing a full config example for React/Vue would be a good idea for such nested properties.

1reaction

FightRaycommented, Feb 11, 2019

Hey @junedchhipa , I am aware of this link and I have already seen it before. What I meant is that I have this object called chartOptions which contains the options for the chart, so I tried placing the events array in there, on the same level as colors and labels. It was not clear that I had to create another object named chart and put it in there. The way to make the chart options object should be more clear in my opinion, that is all. Thank you and good job with the project.

chartOptions: {
                    chart: {
                        height: 350,
                        type: 'pie',
                        events: {
                            dataPointSelection: function (event, chartContext, config) {
                                console.log("test dps");
                            }
                        }
                    },

                    labels: ['Slice1', 'Slice2', 'Slice3'],
                    colors: ['#fff', '#000', '#00e396']
                },

Top Results From Across the Web

How to implement click event or data point selection on ...

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

events - ApexCharts.js

dataPointSelection : function Fires when user clicks on a datapoint (bar/column/marker/bubble/donut-slice). The third argument, in addition to the config object ...

Data Settings for Dashboard Pie and Donut Chart Components

A pie chart or a donut chart is good for showing the relative shares of different quantities. Use the component data tab to...

WPF Chart Data-Point Selection - SciChart

SciChart WPF ships with hundreds of WPF Chart Examples which you can browse, play with, view the source-code and even export each WPF...

Create Interactive Chart with the JavaScript 'ApexCharts' Library

BugReports https://github.com/dreamRs/apexcharter/issues ... While, in pie/donut charts, each label corresponds to value in series array.