3

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
        }
    }
},

enter image description here

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:

Mike Zavarello
  • 3,514
  • 4
  • 29
  • 43
  • 2
    Hi Mike, you can vote for this feature to be built-in, see Highcharts [UserVoice](https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/15960472-collision-detection-for-data-labels) topic. Probably my old plugin could be a good start [this question](https://stackoverflow.com/questions/20044479/highcharts-spline-datalabels-overlaping/20050449#20050449), I will take a look.. – Paweł Fus Jan 25 '18 at 11:15
  • 1
    Something like this: http://jsfiddle.net/BlackLabel/Lxw7koey/1/ - it's not a perfect solution, because it only translates labels vertically, not considering horizontal space (logic borrowed from column series, where it makes sense) and it's running only once. Probably code should check if any change was applies and run max `n`-times or until no collision was found. – Paweł Fus Jan 25 '18 at 11:25
  • Thanks for your insight, @PawełFus. I'll review your plugin and see how it can work with this project. – Mike Zavarello Jan 29 '18 at 13:11
  • @PawełFus I posted a comment on the UserVoice topic you provided. I tried your solution in my specific chart instance, but there are simply too many close, crowded bubbles and long data labels to make this possible. I've also reached out to the chart's data owner on some alternative solutions for presenting this type of data. Thanks again! – Mike Zavarello Mar 16 '18 at 14:05
  • 1
    Thanks! In Highcharts 7 we want to improve labels positioning for charts (roadmap: https://www.highcharts.com/documentation/roadmap ). I can't promise full anty-collision at this moment, though.. – Paweł Fus Mar 16 '18 at 15:23

0 Answers0