CODEWITHSUNDEEP
highcharts
AlexMA
AlexMA

Reputation: 10192

Highcharts bubble chart dataLabels overlapping

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

Upvotes: 4

Views: 3032

Answers (2)

jbgarr
jbgarr

Reputation: 1398

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

Upvotes: 1

Paweł Fus
Paweł Fus

Reputation: 45079

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

Upvotes: 2

Related Questions