AlexKibo88 AlexKibo88 - 1 year ago 218
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

option like this:

// Rotate chart
startAngle: convertAngle("rads", this.angle) // gives the point angle in rads

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.

Answer Source

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)
    startAngle += (p.percentage/100.0 * 360.0);
    startAngle: -startAngle + 180 - ((this.percentage/100.0 * 360.0)/2) // center at 180

Here's an example.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download