9

With Highcharts 3.0 it is possible to create charts with type 'bubble', whereas prior to 3.0 it was necessary to use a 'scatter' chart and modify marker size to make bubble charts. The nice thing about the old way is you had complete control over the visible pixel radius of each bubble--the new bubble charts automatically resize the bubbles so they are sized relative to each other. Is there any way to turn off this behavior or set bubble radius manually?

AlexMA
  • 9,842
  • 7
  • 42
  • 64
  • Why don't you continue using scatter charts? – PeerBr Aug 06 '13 at 00:30
  • @PeerBr I would, but large markers near the edge of the graph tend to overflow the chart's boundaries, whereas with bubble charts the markers are automatically controlled for you. See http://stackoverflow.com/questions/15535932/highcharts-prevent-large-marker-from-overflowing-axes-my-bubbles-are-escapin – AlexMA Aug 07 '13 at 12:27

2 Answers2

10

I am having a hard time seeing how a bubble chart, where the bubbles are not sized relative to each other, would be of any use.

You should be able to use the minSize and maxSize options, however, to control them the way that you need to:

bubble: {
                minSize:2,
                maxSize:50
         }

{{edit: I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height }}

jlbriggs
  • 17,612
  • 4
  • 35
  • 56
  • I will manually keep the sizes relative, but want to control the width *in pixels*. Also, I cannot find those options in the docs (api.highcharts.com). I tried using bubble as a property of plotOptions and nothing happened. – AlexMA Mar 29 '13 at 16:18
  • I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height – jlbriggs Mar 29 '13 at 16:24
  • Note that this behavior does not seem to be stable yet. I have gotten errors from Highcharts simply be altering the minSize to a different number (see http://jsfiddle.net/FbUwQ/). My advice is to wait for this to be added to the docs. – AlexMA Mar 29 '13 at 16:40
  • 1
    That is rather strange. Something about 15% in particular it doesn't like. I've used dozens of other values without issue. If we waited for features to be added to the docs, we'd have missed out on a lot of things with Highcharts over the years ;) – jlbriggs Mar 29 '13 at 17:04
  • 1
    It's not part of API, but should work perfectly fine. - jlbriggs is right. If you have strict example which make an error, let us know! Make sure maxSize is higher than minSize ;) – Paweł Fus Jul 19 '13 at 12:19
10

I found that adding an "empty" bubble to the series helps keep the size of all bubbles in the chart relative to each other:

name: '',
data: [{x:0,y:0,z:0}], 
showInLegend: false, 
color: 'transparent', 
enableMouseTracking: false

Here's a sample on JSFiddle: http://jsfiddle.net/9bebT/2/. The legend, color, and mouse tracking variables each help keep the item in the series but otherwise invisible to the user. If you simply remove the empty bubble or set its visibility to "false," the chart doesn't register the empty bubble's z axis (diameter) as the minSize.

Mike Zavarello
  • 3,514
  • 4
  • 29
  • 43