3

I have a Highcharts bubble chart where many of the points are going to have the same, or very similar values. Currently only the top point's data label is visible. I have functionality that allows the points to be highlighted (using the select() method). When a point is selected I am also moving it to the top by using point.graphic.toFront(), but I also want the selected point's data label to be moved to the top too. I can't figure out how to do that or if it's possible.

Is there a way to move an individual point's data label to the front/top so that it can be seen?

I know there is a setting to allow data labels to overlap, but that's not necessarily what I want to do. I would like to keep the current functionality where only the top data label is shown for overlapping points, but I would like to be able to programmatically control what point/data label are on top. I've tried to adjust the point's data label's z-index, but that didn't seem to do anything.

jbgarr
  • 1,378
  • 1
  • 12
  • 23
  • Could you post a live example, like jsFiddle? It will be faster to work on existing code, than write all over again. – Kacper Madej Apr 13 '16 at 12:11
  • @KacperMadej very simple example here: http://jsfiddle.net/jlbriggs/3d3fuhbb/136/ (I tried to work something out earlier, but didn't get far) "A" is in front, "B" is hidden. How can "B" take precedence? – jlbriggs Apr 13 '16 at 12:55
  • Sorry I didn't provide a jsFiddle. I was hoping it wouldn't be necessary, but thank you very much for helping me on this one @jlbriggs. – jbgarr Apr 13 '16 at 17:48

1 Answers1

2

If you define labelrank as point property, then it will allow you control over label hide/show when labels are overlapping.

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

Example: http://jsfiddle.net/x5sfcekL/

Kacper Madej
  • 7,846
  • 22
  • 36
  • This is great! Where is the info for `labelrank` in the docs? I never saw any mention of it. Either way, thanks so much for the help on this. It solved my problem. – jbgarr Apr 13 '16 at 17:50
  • 1
    Nice. And just a note - it seems you could skip assigning it on each point, and only update it on points where there is a conflict that you want to overwrite, by setting the point you want on top to 1. – jlbriggs Apr 13 '16 at 18:01
  • 2
    @jlbriggs That's actually exactly what I eded up doing. So for future reference here is the important part of the update code that was useful for me: `point.update({labelrank: 1})` – jbgarr Apr 13 '16 at 18:08
  • @jbgarr It's documented on Highmaps API, but it's a part of Highcharts and it works in Highcharts. API: http://api.highcharts.com/highmaps#series.data.labelrank If it doesn't explain enough then I am afraid that you would have to look into [Highchart code](http://code.highcharts.com/highcharts.src.js) and look for `labelrank` - but it has only 6 occurrences, so it shouldn't be a problem. – Kacper Madej Apr 14 '16 at 10:28
  • @KacperMadej Ok, that's great to know. I'm going to suggest that it gets added to the Highcharts API as well though since it's undocumented there and is very helpful. I know there are others that have run into the same issue and it's hard to use an API if you don't know it even exists. Thanks so much for pointing it out. – jbgarr Apr 14 '16 at 15:26
  • @jbgarr You are welcome. I have passed this suggestion to Highcharts developers - they will look into this. And I see that you posted this suggestion on github. And API is updated - https://github.com/highcharts/highcharts/issues/5217 Thank you for suggestion :) – Kacper Madej Apr 15 '16 at 10:43