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

Question

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

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

The normal state looks 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 reduce the width or height of this chart, datalabels are combined that look like the image below. I think this is a property problem distance. I tried to change the distance dynamically, but could not.