Geek Answers Handbook

HighchartsLabels bubble chart data overlaps

As shown in the figure (which is not the same code as the violin, but exhibits a problem), with the new Highcharts bubble diagrams, it seems that dataLabels like to sit on top of each other. Is there an easy workaround? I would be happy to manually change the z-index based on each label, but this does not seem to work for bubble charts. Here is an example of code that does not work properly (try it in fiddle ):

series: [{ data: [{ x: 99, y: 36, z: 50 }, { x: 99, y: 74, z: 55, dataLabels: { zIndex:15, enabled: true, } }, { x: 99, y: 76, z: 55, dataLabels: { zIndex: 1, enabled: true } } ] }],

enter image description here

+4
source share
2 answers

You can set the useHTML: true flag and then set the z-index: x property for dataLabels, see http://jsfiddle.net/ZLmU8/4/

+2
source

Apparently, there is a labelrank property on Highcharts that can be used to determine which point labels are on top. It can be used when you create your data as follows:

 data: [{ x: 1, y: 1, labelrank: 1, name: 'A' },{ x: 1, y: 1, labelrank: 2, name: 'B' }]

Or it can be updated at a separate point to bring that DataLabel point to the front by doing something like this: chart.series[0].points[0].update({labelrank: 3});

I had a similar problem and I created this SO question that was answered.

Edit

They added information about series.data.labelrank to their docs: http://api.highcharts.com/highcharts#series.data.labelrank

+1
source

More articles:


All Articles