aztheog
aztheog

Reputation: 43

How to allow multiple point selections in Highcharts donut chart?

I want to allow the user to select multiple points of a multilayer donut chart.

My donut chart options are as follows:

{
      chart: {
        styledMode: true,
        type: "pie"
      },
      title: {
        text: "Number of Workflows",
        align: "left",
        useHTML: true
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          slicedOffset: 0,
          innerSize: "60%",
          dataLabels: {
            enabled: false
          },
          states: {
            hover: {
              halo: {
                size: 0
              }
            }
          },
          tooltip: {
            headerFormat: "<header>{point.key}</header><br/>",
            pointFormat: "<span> {point.percentage:.1f}% </span>"
          },
          series: {
            point: {
              events: {
                click: function(event) {
                  this.slice(null);
                  this.select(null, true);
                  console.log(this.series.chart.getSelectedPoints());
                }
              }
            }
          }
        }
      },
      series: [
        {
          name: "Type",
          data: [{name: type, y: number}, ...]
        },
        {
          name: "Status",
          size: "60%",
          innerSize: "40%",
          data: [{name: status, y: number}, ...]
        }
      ]

When I click on a point, the function does not seem to run (nothing in the console) and I can't select more than one point. Is this because of styledMode: true? I'm also using Highcharts in a Vue app.

Thank you!

Upvotes: 0

Views: 127

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

The function is not triggering after the click because it is assigned wrong in the plotOptions.pie.series object, but it should be:

plotOptions: {
   pie: {
      ...
   },
   series: {
     point: {
       events: {
         click: function(event) {
           this.slice(null);
           this.select(null, true);
           console.log(this.series.chart.getSelectedPoints());
        }
      }
    }
  }
}

Demo: https://jsfiddle.net/BlackLabel/4gp7xd6c/

Or:

plotOptions: {
   pie: {
   point: {
    events: {
      click: function(event) {
        this.slice(null);
        this.select(null, true);
        console.log(this.series.chart.getSelectedPoints());
      }
    }
   }
 }
}

API: https://api.highcharts.com/highcharts/series.pie.events.click

Upvotes: 1

Related Questions