highcharts - donut chart - Labels inside and outside

Question

I have created a donut chart using the highcharts library.

I need to have two different datalabels, one outside how it is at the moment and another datalabel on the inside.

Expected outcome:

Here is a fiddle: http://jsfiddle.net/FQxf4/

JS:

$(function () {
    $('#container5').highcharts({

        chart: {
            type: 'pie',
            options3d: {
                enabled: false,
                alpha: 0
            }
        },

        colors: ['#081969', '#0e2569', '#1e3b81', '#284893', '#30509b'],
        title: {
            text: ''
        },tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                innerSize: 130,
                depth: 45
            }
        },
        series: [{
            name: 'Delivered amount',
            data: [
                ['31%', 31],
                ['25%', 25],
                ['22%', 22],
                ['15%', 15],
                ['7%', 7]
            ]
        }]
    });
});

Answer 1

You can use two same series. Something like this:

series: [{
        name: 'Delivered amount',
        data: [
            ['31%', 31],
            ['25%', 25],
            ['22%', 22],
            ['15%', 15],
            ['7%', 7]
        ],
        size: '60%',
        dataLabels: {
                formatter: function() {
                    return this.y
                },
                distance:10
            }
    },{
        name: 'Delivered amount',
        data: [
            ['3', 31],
            ['2', 25],
            ['2', 22],
            ['5', 15],
            ['7', 7]
        ],
        size: '60%',
        dataLabels: {
                formatter: function() {
                    return this.point.name
                },
                color: 'white',
                distance:-10
            }
    }]

DEMO