laloune
Posts: 23
Joined: Thu Aug 28, 2014 10:10 pm

Bubble chart - group bubbles

Hello,

I have a set of data used in a bubble chart. X would be profitability, y the utilization rate, and z the absolute budget.

I would like to know whether it is possible to style using particular thresholds, for instance when profitability & utilization rate are between specific thresholds

I tried with a function for "filledColor" but it does not seem to works, thus it not very practical, I would rather be able to define groups

is the following achievable using Highcharts ?

many thanks in advance!
laloune
Posts: 23
Joined: Thu Aug 28, 2014 10:10 pm

Re: Bubble chart - group bubbles

Actually I found a way to group the bubbles by color, see here: http://jsfiddle.net/Lkz8cr6s/http://jsf ... /Lkz8cr6s/

my latest challenge is to display the labels for each bubble with a balloons because they are sometimes too long. See here how this looks like in excel: Image

is this achievable in Highcharts ?

many thanks in advance!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Bubble chart - group bubbles

Hello laloune,

Glad to hear you have figured it out.

Could you provide me with working demo? The link that you shared doesn't seem to be correct. Also, could you give me some more details what would you like to do with these labels? I understand that the connectors are too long but I'm not quite sure what do you mean with balloons.

Thanks for clarification.
Regards!
Mateusz Bernacik
Highcharts Developer
laloune
Posts: 23
Joined: Thu Aug 28, 2014 10:10 pm

Re: Bubble chart - group bubbles

hello Mateusz,

oh, my mistake.

I actually changed the link, see here: http://jsfiddle.net/3a1kow9v/

in there I displayed the labels in the bubble, and as you can see there is one that is veeery long. the goal would be to offset the label using a sort of "comic balloon" if you know what I mean ?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Bubble chart - group bubbles

Hi laloune,

Ok, now I get it, thanks for explanation.

For bubble series data labels are always displayed like this and you can't really do anything about it. However, you might want to try create labels with annotations. Here you can find a demo example with available shapes and usage:
Demo: https://jsfiddle.net/gh/get/library/pur ... ns/shapes/
API reference: https://api.highcharts.com/highcharts/a ... ons.labels

Alternatively you could use SVGrenderer tool which allows you to draw simple shapes and text on chart but rendering custom labels for each bubble might require some coding.
API reference: https://api.highcharts.com/class-refere ... VGRenderer

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”