Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts 3.0 Bubble Chart -- Controlling bubble sizes

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?

like image 984
AlexMA Avatar asked Mar 29 '13 15:03

AlexMA


People also ask

What is bubble size in bubble chart?

In Microsoft Excel's bubble charts, bubble sizes are fixed according to the largest bubble in the chart. You can fine tune this maximum size by double clicking on any series, and on the Format Series dialog, Options tab, select a default multiplier. I like to use 200% to get large bubbles.

How do you organize data for a bubble chart?

To create a bubble chart, arrange your data in rows or columns on a worksheet so that x values are listed in the first row or column and corresponding y values and bubble size (z) values are listed in adjacent rows or columns.

How do you make a bubble chart more effective?

Present a clear trend The two most important variables or the most important relationship should end up on the vertical and horizontal axes. Avoid using a bubble chart if the third variable does not contribute significantly to the story told by the chart, and use additional, simpler plots instead.


2 Answers

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 }}

like image 171
jlbriggs Avatar answered Sep 23 '22 09:09

jlbriggs


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.

like image 44
Mike Zavarello Avatar answered Sep 20 '22 09:09

Mike Zavarello