Reputation: 43
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
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