How to align datalabels in pie charts

Question

I having a little problem in highcharts. i have created pie chart which have datalabels. My problems is when length of datalabel is large then it moves out of area and some part of it is disappear. lat look at my code

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Jquety

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                },
                size:[40],
                    startAngle: -90,
                    endAngle: 90,
                    center: ['50%', '100%']
            }
        },
        series: [{

            type: 'pie',
                name: 'Amount',
                innerSize: '100%',
                colors: ['#50B432', '#ED561B','#24CBE5'],
                dataLabels: {
                    enabled: true,
                    rotation: 0,
                    color: '#666666',
                    align: 'top',
                    x: -10,
                    y: -10,
                    style: {
                        fontSize: '9px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 0px black'
                    }
                },
            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]
            ]
        }]
    });
});

here is Fiddle

i want it like Demo fiddle. In fiddle each datalabel always moves in chart area without disappearing.

Note that i have already solve problem in bar chart and other charts.

Thanks in advance

Answer 1

You can

• reduce a size of chart
• use distance parameter.
• set useHTML and adapt it by css