how to make highcharts pie datalabels always in center of each slice?

6
votes

I really want to know how to make datalabels always in center of each slice in pie chart.

The normal state look like this(you can also see this example here)

enter image description here

$('#container').highcharts({
    chart: {
        type: 'pie'
    },

    plotOptions: {
        pie: {
            center:  ["50%", "50%"],
            dataLabels: {
                distance: -50
            }
        },
        series:{
            events:{
                load:function(){
                    console.log(this.chartWidth, this.chartHeight);   
                }
            }
        }
    },

    series: [{
        data: [
            ['Firefox',   44.2],
            ['IE7',       26.6],
            ['IE6',       20],
            ['Chrome',    3.1],
            ['Other',    5.4]
        ]
    }]
});

But, when I decrease the width or height of this chart, datalabels combined, which look like the image below. I think it is the problem of distance property. I've tried to change distance dynamically but failed.

enter image description here

As a result, what I want to do is to locate datalabels always in center of the each slice even decreasing/increasing chart size.

1
javascriptjqueryhtmlhighchartspie-chart

1 Answers

0
votes

This is a tough one. From my experiences, there's not (currently) a way to explicitly center the labels directly in the middle of each pie slice. I've tried positioning the labels as you did in your example with the same (unsatisfactory) results, especially in smaller browser windows.

I'd recommend either using a legend to show the categories/types in your pie or consider using a stacked bar chart instead (see http://www.highcharts.com/demo/bar-stacked).

I hope this is helpful!