AlexKibo88 - 4 months ago 42x
HTML Question

Highcharts - Rotate pie chart aligning the clicked section to a fixed point (180°)

I am dealing with a request regarding the possibility of rotating a pie chart created with highcharts.js once the user clicks on a portion of the pie.
Giving a fixed point, which has an angle of 180 degrees, the pie should align itself pointing the clicked section towards that fixed point, represented by a triangle in my case. So, every time the user clicks on a section, the fixed triangle points at it, as the pie rotates.
I have already managed to catch the click event and change the

`startAngle`
option like this:

``````// Rotate chart
donutChart.series[0].update({
});
``````

which is obviously wrong, but I would like to do something like that in the point-events-click event.

Do you have any suggestions in order to achieve this (if that is even possible)?

Thank you.

Cool question.

Your rotation algorithm is a bit flawed. Say, for example, you want the startAngle to be such that it rotates your 3rd slice to start at 0 degrees (top of the chart). This would be:

``````-(slice1ArcDegrees + slice2ArcDegrees)
``````

The ArcDegrees can be found by:

`````` (percentage/100.0 * 360.0)
``````

Putting this together in the point click 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.