Dealing with pie chart label overlap [Highcharts]

Question

My chart is ugly and I'm not sure what to do about it. It's ugly because the labels overlap and are barely readable. Ideas I've already considered:

• Hide labels for small slices. This has the obvious negative of less information visible, especially when the page is printed. Our users print a lot.
• Alternate big slices and little slices. Not ideal as it reduces the organization of the information and may suffer occasionally from the same issue.
• Manually place each label with fixed positions. Expensive solution with regards to implementation time and code maintenance.

Anyone have a better idea? I wish highcharts was able to detect overlap and do something about it automatically. Here's the pic:

Answer 1

I also come across the same issue. I fixed the issue with below code.

plotOptions : {
    pie : {
        dataLabels : {
            whiteSpace: 'nowrap', 
            overflow: 'hidden',
            textOverflow: 'ellipsis'
        }
    }
}

Answer 2

There is a new option in Highcharts to set the startAngle of the pie chart. You can use the startAngle to arrange all the small slices on the right side of the chart, allowing more of the labels to fit.

series: [{
    startAngle: 90
}]

JSFiddle demo here: http://jsfiddle.net/highcharts/dK9CD/

Answer 3

I found a highcharts forum topic related to rotating the pie chart to better distribute labels in this sort of case, but it involves modifying the source to find the following line and change the cumulative reference to zero:

cumulative = -0.25, // start at top

One option that is not optimal but might work is to rotate the data labels a few degrees so that they don't overlap, like so:

{
    plotOptions : {
        pie : {
            dataLabels : {
                rotation : 15
            }
        }
    }
}