How to avoid overlapping of dataLabels in highchart pie chart?

Question

I am using highcharts for rendering pie chart,

when series data is small/less, dataLabels are overlapping.

Link to reproduced problem.

http://jsfiddle.net/venkatesh1453/nwg2rdze/1/

 plotOptions: {
        pie: {
            dataLabels: {
                distance : function(){
                    return (-30 - (this.series.index *3));
                }
            }
        }
    },

I tried this code, but it moves all labels to right-top corner.

Please provide solution/workaround for avoiding labels overlapping.

Answer 1

The easiest way is move data labels outside of pie chart.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        series: [{
            data: [
                ['Firefox',   44.2],
                ['IE7',       26.6],
                ['IE6',       20],
                ['Chrome browser',    1.1],
                ['Other browsers',    1.4]
            ]
        }]
    });
}); 

Example