Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dealing with pie chart label overlap [Highcharts]

Tags:

highcharts

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:

The label overlap on this chart is obviously an issue

like image 559
AlexMA Avatar asked Sep 26 '12 14:09

AlexMA


People also ask

How can you avoid overlapping labels in a pie chart?

Use legend() method to avoid overlapping of labels and autopct. To display the figure, use show() method.

How do you keep data labels from overlapping Excel?

Stop Labels overlapping chartRight click on the Axis. Choose the Format Axis option. Open the Labels dropdown. For label position change it to 'Low'

How do you add two data labels to a pie chart?

On the Layout tab, in the Labels group, click Data Labels, and then click the option that you want. For additional data label options, click More Data Label Options, click Label Options if it's not selected, and then select the options that you want.


1 Answers

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/

like image 160
d2vid Avatar answered Oct 04 '22 04:10

d2vid