Rotating dataLabels in a Highcharts pie chart

Question

I\'m trying to rotate and position the dataLabels in each segment of a Highcharts pie chart and just feel like Im getting myself deeper and deeper without getting closer to

Answer 1

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/

similar topic: Radial Pie Chart Datalabels in Highcharts

Answer 2

I found rotating the labels themselves to be problematic, because when using highcharts to rotate them, it seems to rotate them about their own axis. To achieve the best result, you want to rotate the label about the origin of the pie chart. To accomplish this, I appended absolutely positioned divs directly on top of the pie chart, and iterated over the points to calculate the rotation based on percentages. The downside, of course, is that external divs are being used for the labels, rather than highcharts's own labeling functions.

Here is the code I added:

First, some CSS styles for the divs which hold the labels, and the pie chart itself:

CSS

div#container{
    position:relative;
}
div.outerContainer{
    width:600px;
    height:40px;
    position:absolute;
    top:280px;
    display:none;
    color:white;
    font-family:Helvetica, Arial, Sans;
    font-size:16px;
    font-weight:bold;
    text-transform:uppercase;
}
div.outerContainer > span{
    float:left;
    width:300px;
    text-align:center;
    height:40px;
    line-height:40px;
}

Then, custom load event code to calculate the labels

        load: function () {
            var cumulativePercentage = 0;
            var $labelTemplate = $("<div class=outerContainer><span class=left></span><span class=right></span></div>");
            $.each(this.series[0].data, function (i, point) {
                $label=$labelTemplate.clone();
                $label.find('span').text(point.name);
                var angle=-90+(cumulativePercentage+point.percentage/2)*360/100;
                if (angle > 90) {
                    angle=angle+180;
                    $label.find('span.right').css({visibility:'hidden'});
                }
                else {
                    $label.find('span.left').css({visibility:'hidden'});
                }
                $label.css({transform:'rotate('+angle+'deg)'});    
                cumulativePercentage+=point.percentage;


                $('#container').append($label);

            });
            $('div.outerContainer').show();
        }

Also, I deleted the dataLabels property.

Brief explanation:

cumulativePercent keeps track of how much of the pie each section contributes, so that we can insert the label exactly in the middle of each section. We check if the angle is greater than 90 degrees so that we can

1. Flip the label div so that the text is not upside down (or leave it if less than 90 degrees)

2. Decide if the text should be on the left or right side of the div, depending on its orientation.

See it in action:

  $('#container').highcharts({
        chart: {
            type: 'pie',
            backgroundColor: 'transparent',
            spacing: [0, 0, 0, 0],
            margin: [0, 0, 0, 0],
            events: {
                load: function () {
                    var cumulativePercentage = 0;
                    var $labelTemplate = $("<div class=outerContainer><span class=left></span><span class=right></span></div>");
                    $.each(this.series[0].data, function (i, point) {
                        $label = $labelTemplate.clone();
                        $label.find('span').text(point.name);
                        var angle = -90 + (cumulativePercentage + point.percentage / 2) * 360 / 100;
                        if (angle > 90) {
                            angle = angle + 180;
                            $label.find('span.right').css({visibility: 'hidden'});
                        }
                        else {
                            $label.find('span.left').css({visibility: 'hidden'});
                        }
                        $label.css({transform: 'rotate(' + angle + 'deg)'});
                        cumulativePercentage += point.percentage;


                        $('#container').append($label);

                    });
                    $('div.outerContainer').show();
                }
            }
        },
        title: {
            text: null
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            pie: {
                borderColor: 'rgb(243, 243, 243)',
                borderWidth: 2,
                shadow: false,
                center: ['50%', '50%'],
                colors: ['rgb(77, 196, 215)', 'rgb(50, 68, 132)', 'rgb(85, 119, 183)']
            }
        },
        tooltip: {
            enabled: false
        },
        series: [{
                type: 'pie',
                name: 'Votes',
                data: [
                    ['Yes', 9],
                    ['No', 5],
                    ['Undecided', 2]
                ],
                size: '90%'
            }]
    });

    div#container{
        position:relative;
    }
    div.outerContainer{
        width:600px;
        height:40px;
        position:absolute;
        top:280px;
        display:none;
        color:white;
        font-family:Helvetica, Arial, Sans;
        font-size:16px;
        font-weight:bold;
        text-transform:uppercase;
    }
    div.outerContainer > span{
        float:left;
        width:300px;
        text-align:center;
        height:40px;
        line-height:40px;
    }

<div id="container" style="height: 600px; width: 600px;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>