Highcharts - Rotate a pie chart aligning a clicked section to a fixed point (180 °)
I am dealing with a query regarding the ability to rotate a pie chart created with highcharts.js as soon as the user clicks on a piece of pie. By giving a fixed point that has an angle of 180 degrees, the pie should flatten out, pointing at the cut off towards that fixed point, represented by the triangle in my case. Thus, every time the user clicks on a section, a fixed triangle points to it as the spinning pie spins. I already managed to catch the click event and change the parameter startAngle
like this:
// Rotate chart
donutChart.series[0].update({
startAngle: convertAngle("rads", this.angle) // gives the point angle in rads
});
which is clearly wrong, but I would like to do something like this in the point-events-click event.
Do you have any suggestions for achieving this (if possible)?
Thank.
source to share
Cool question.
Your rotation algorithm is a little flawed. Let's say for example you want startAngle to rotate your 3rd slice to start at 0 degrees (top of the diagram). It will be:
-(slice1ArcDegrees + slice2ArcDegrees)
ArcDegrees can be found at:
(percentage/100.0 * 360.0)
Put this together in a dot handler:
var points = this.series.points;
var startAngle = 0;
for (var i = 0; i < points.length; i++){
var p = points[i];
if (p == this)
{
break;
}
startAngle += (p.percentage/100.0 * 360.0);
}
this.series.update({
startAngle: -startAngle + 180 - ((this.percentage/100.0 * 360.0)/2) // center at 180
});
Here's an example .
source to share