Highcharts :Donut chart overlaps data labels

Question

I'm working on a donut chart type, with the Highcharts library.

As you can see in the image below, some of the inner data labels are overlapped. I've been playing with the parameter "distance" but doesn't fix this.

Find attached the code below,

// Create the chart
    $(container).highcharts({
        chart: {
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        exporting: {   
            buttons: {
                contextButton: {
                    symbol: 'url(/icon-turn-down.png)'
                }
            }
        },
        title: {
            text: _title, 
            margin: 50
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            formatter: function() {
                var s = this.point.name.split('.');                
                if (s.length == 1) {
                    return this.y > 1? '<b>'+this.point.name+':</b> '+Highcharts.numberFormat(this.point.y) : null;
                }
                return this.y > 1? s[0]+'<br /><b>'+$.trim(s[1])+':</b> '+Highcharts.numberFormat(this.point.y) : null;
            }
        },
        series: [{
            name: '',
            data: innerData,
            size: '80%',
            dataLabels: {
                formatter: function() {
                    return this.y > 0 ? this.point.name : null;
                },                 
                color: 'white',
                distance: -50
            }
        }, {
            name: '',
            data: outerData,
            size: '100%',
            innerSize: '80%',
            dataLabels: {
                formatter: function() {
                    var s = this.point.name.split('.');  
                    if (s.length == 1) {
                         return this.y > 1 ? '<b>'+ this.point.name+':</b> '+ Highcharts.numberFormat(this.point.y) : null ;
                    }                   
                    s = this.point.name.substring(this.point.name.indexOf(".")+2);
                    return this.y > 1 ? '<b>'+ s+':</b> '+ Highcharts.numberFormat(this.point.y):  null;
                },
                style: {
                    fontSize: "10px",                       
                    fontColor: "#000000"
                }
            }
        }]
    });

Answer 1

Finally, I found a solution, which is playing with the "startangle" attribute.

     series: [{
                name: '',
                data: innerData,
                startAngle:110, 
                size: '80%',
                dataLabels: {
                    formatter: function() {                    
                        return this.y > 0 ? this.point.name : null;
                    },                 
                    color: 'white',
                    distance: -45
                }, {
...

Answer 2

Distance parameter cannot be applied for each point, only general, so only what comes to my mind is iteared on each datalabel and use translate() function, or use formatter, apply CSS class and dhten use top/left parameter for each element. But will be helpful if you recreate your example as fiddle.