Highcharts: is it possible to show all data labels in a bubble chart without them overlapping?

99封情书 提交于 2019-12-22 10:45:50

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!