score:4

Accepted answer

You have no possibility to set double datalabels, but you can use workaround, which is not perfect but maybe will be helpful. So you can set useHTML, then in formater return two divs, first appropriate datalabel (outside) and second with inside. Then set id with counter which define each div's id as unique, then only what you need is set appropriate CSS. Example of position one datalabel is available here: http://jsfiddle.net/4RKF4/

$(function () {
var chart,
    counter = 0;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    useHTML:true,
                    formatter: function() {
                        counter++;
                        return '<div class="datalabel"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div><div class="datalabelInside" id="datalabelInside'+counter+'"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div>';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});

});

CSS styles:

.datalabelInside {
position:absolute;
}

 #datalabelInside1 {
color:#fff;
left:-150px;
}

score:5

there is a easy work arround for it

that is you overlay 2 pie with diferent datalabels

http://jsfiddle.net/4RKF4/29/

    $(function () {


        // Create the chart
        $('#container').highcharts({
            chart: {
                type: 'pie',
                backgroundColor: 'rgba(0,0,0,0)',
                y:100

            },
            title: {
                text: 'sfs '
            },
            yAxis: {
                title: {
                    text: ' '
                }
            },
            plotOptions: {
                pie: {
//                   y:1,
                    shadow: false,
//                  center: ['50%', '50%'],
                    borderWidth: 0,
                    showInLegend: false,
                    size: '80%',
                    innerSize: '60%'
                  ,

                    data: [
                        ['allo', 18],
                        ['asdad', 14],
                        ['asdad', 11],
                        ['asdasd', 10],
                        ['adad', 8],
                        ['asdada', 7],
                        ['adada ada', 7],
                        ['adad', 5],
                        ['asdas',7],
                        ['ada', 3]

                    ]
                }
            },
            tooltip: {
                valueSuffix: '%'
            },
            series: [
                {
                    type: 'pie',
                    name: 'Browser share',

                    dataLabels: {
                        color:'white',
                        distance: -20,
                        formatter: function () {
                            if(this.percentage!=0)  return Math.round(this.percentage)  + '%';

                        }
                    }
                },
                {
                    type: 'pie',
                    name: 'Browser share',

                    dataLabels: {
                        connectorColor: 'grey',
                        color:'black',
 //                            y:-10,
                        softConnector: false,
                        connectorWidth:1,
                        verticalAlign:'top',
                        distance: 20,
                        formatter: function () {
                            if(this.percentage!=0)  return this.point.name;

                        }
                    }
                }
            ]
        });
    });

Related Query

More Query from same tag