Radial Pie Chart Datalabels in Highcharts

Question

How can I center the datalabel in the wedge of the pie (inside) and align to the pie radius instead of horizontal or vertical. Here is an image of what I am after.

Maybe someone has a plug-in if it is not an out of the box feature?

Or even some experimental code would be useful.

stackoverflow.com/questions/55307049/… . I want something similar can you help ? — user9951102

Grzegorz Blachliński Grzegorz Blachliński · Accepted Answer · 2015-11-12T16:59:57

Highcharts is not providing options for auto rotating data labels in pie chart. You can write your custom function for dataLabels rotation.

Here is simple example how you can do it:

var allY, angle1, angle2, angle3,
    rotate = function () {
        $.each(options.series, function (i, p) {
            angle1 = 0;
            angle2 = 0;
            angle3 = 0;
            allY = 0;
            $.each(p.data, function (i, p) {
                allY += p.y;
            });

            $.each(p.data, function (i, p) {
                angle2 = angle1 + p.y * 360 / (allY);
                angle3 = angle2 - p.y * 360 / (2 * allY);
                p.dataLabels.rotation = -90 + angle3;
                angle1 = angle2;
            });
        });
    };

First I am calculating sum of all Y values. Then I am calculating the angle of middle of all pie slices. Then I am rotating data labels by the same angle.

example: http://jsfiddle.net/izothep/j7as86gh/6/

Radial Pie Chart Datalabels in Highcharts

1 Answers