Highcharts bubble chart dataLabels overlapping

Question

As shown in the picture (which is not the same code as the fiddle, but exhibits the problem), with Highcharts new bubble charts it seems like dataLabels like to sit on top of each other. Is there an easy workaround for this? I'd be happy to manually change the z-index on a per label basis, but this doesn't seem to work for bubble charts. Here's some sample code that fails to work as expected (try it in a 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

score 2 · Answer 1 · answered Apr 08 '13 at 09:56

2

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

answered Apr 08 '13 at 09:56

Paweł Fus

44,795
3
61
77

2

This doesn't affect the z-index, though it does make the overlap look less bad. Try changing the z-index--nothing happens. This is supported by the docs for plotOptions.bubble.dataLabels.useHTML: "Note that exported images won't respect the HTML, and that HTML won't respect Z-index settings". The chart still has the potential to look unprofessional, though (http://jsfiddle.net/ZLmU8/5/) – AlexMA Apr 08 '13 at 12:52

score 1 · Answer 2 · edited May 23 '17 at 12:16

Apparently there is a labelrank property on the Highcharts point objects that can be used to dictate which point labels are on top. It can be used when you're creating your data like this:

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

Or it can be updated on an individual point to bring that point's dataLabel to the front by doing something like this: chart.series[0].points[0].update({labelrank: 3});

I had a similar issue and created this question on SO that just was answered.

Edit

They have added info regarding series.data.labelrank to their docs as well: http://api.highcharts.com/highcharts#series.data.labelrank

Highcharts bubble chart dataLabels overlapping

2 Answers2

Linked