Highcharts 3.0 Bubble Chart - Bubble Size Management

With Highcharts 3.0, you can create bubble charts, while prior to 3.0 you had to use a scatter chart and resize the marker to create bubble charts. The good thing about the old way is that you have full control over the apparent pixel radius of each bubble - new bubble diagrams automatically resize the bubbles, so they are sized relative to each other. Is it possible to disable this behavior or set the radius of the bubble manually?

+7
source share
2 answers

It’s not easy for me to see how a bubble diagram in which the bubbles are not sized relative to each other would be useful.

However, you must use the minSize and maxSize parameters to control it the way you need:

bubble: { minSize:2, maxSize:50 } 

{{edit: In fact, I do not see them in the documents. But here you can see an example: http://jsfiddle.net/fXzke/13/ use either the number as the pixel value, or a line with a percentage of the height of the chart}}

+9
source

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

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

Here's an example on JSFiddle: http://jsfiddle.net/9bebT/2/ . Variable legends, colors, and mice track each item in the series, but otherwise it is invisible to the user. If you simply remove the empty bubble or set its visibility to false, the chart does not register the empty axis of the bubble z (diameter) as minSize.

+10
source

All Articles