如何使highcharts pie数据标签始终位于每个切片的中心？

Question

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 )

$('#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.

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

Answer 1

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!