Highcharts Pie chart multi line labels overlapping

2
votes

I'm using highcharts with dynamically generated data and plot names. (Usually between 4 and 8 data points but there will be 2 with small numbers.)

Some of these are a bit long and cause the pie chart to be tiny so I set the plot option style width to force them to wrap and span multiple lines.

However on some of my charts the labels are overlapping and have no idea how to fix it.

Does anyone have any ideas?

http://jsfiddle.net/d600burton/TkPBq/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: 1,
        plotShadow: false
    },
    subtitle: {
        text: 'Drag the handle in the lower right to resize'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            minSize: 1,
            dataLabels: {
                        style: {
                            width: '100px'
                        },                     
                enabled: true,
                color: '#000000',
                format: '<b>{point.name}</b>: {percentage:.2f} %'
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: [
            {name: "On Hire", y: 2884},
            {name: "Collection Note", y: 674},
            {name: "Off Hire Not Confirmed", y: 23},
            {name: "Goods In", y: 41}
        ]

    }]
});
1
highcharts

1 Answers

0
votes

Connectors and datalables are generated idenpendently, so in case when you set small with, connectors are not "moved". In other words I advice to consider width modification.