问题
I'm building a Highcharts bubble chart and am running into a challenge formatting the data labels. The data will be regularly updated, so there will be plenty of times when the bubbles either overlap or are very close to each other.
By default, labels that are very close to one another will be omitted. However, my requirements for this chart include showing the data labels for all bubbles, regardless of their position (therefore, I'm setting allowOverlap
to true
).
Here is a variation of the demo bubble chart that shows my issue (see also the screenshot below): http://jsfiddle.net/brightmatrix/Lxw7koey/. Note how the labels for Portugal and Hungary run into each other at the bottom left, and how Finland and Sweden are very close together towards the center.
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.country}',
allowOverlap: true // shows all data labels, but overlap occurs
}
}
},
Is there a way to offset the data labels so they won't overlap or collide? Because the data will constantly change with each update, I can't rely on a manual offset (either through x or y positioning) or alignment to solve this problem.
For reference, I looked at the following related questions:
- Highcharts bubble chart dataLabels overlapping despite z-index
- Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top
来源:https://stackoverflow.com/questions/48427876/highcharts-is-it-possible-to-show-all-data-labels-in-a-bubble-chart-without-the