Datalabels Radial Pie Chart in Highcharts

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

Maybe someone has a plugin if it is not an out of the box function?

Or even some experimental code would be helpful.

enter image description here

+1
source share
1 answer

Highcharts does not provide the ability to automatically rotate data labels in a pie chart. You can write your custom function to rotate dataLabels.

Here is a simple example of how you can do this:

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;
            });
        });
    };

Y. . .

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

+6

All Articles