HTML5 & JS Bubble Charts

Bubble Chart uses bubble-like symbols to depict data on the Plot Area. Each dataPoint of a bubble chart holds a z value which determines the size of the bubble.

Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.

Bubble Chart Specific Properties

Applies To	Attribute	Type	Default	Options/Examples
dataPoint	z	Number	null	20, 24, 36..
dataSeries/ dataPoint	markerType	String	“circle”	“none”, “circle”, “square”, “cross”, “triangle”
dataSeries/ dataPoint	markerColor	String	dataSeries/ dataPoint Color	“red”,”#1E90FF”..
dataSeries/ dataPoint	markerBorderColor	String	dataSeries/ dataPoint Color	“red”,”#1E90FF”..
dataSeries/ dataPoint	markerBorderThickness	Number	1	4,7..
dataSeries	fillOpacity	Number	1	.2,.4,1 etc

Basic Bubble Chart

Try Editing The Code

Bubble Chart With Additional Customization

Try Editing The Code

Integrations:

Also See:

If you have any questions, please feel free to ask in our forums.Ask Question

6 Comments

Marco says:

January 7, 2015 at 6:13 pm

Is it possible to put strings instead of numbers in each axis of this type of chart? For example to cross-compare two conditions. A simple solution would be to allow for a custom mapping function between a range of (integer) numbers and an array of textual labels. Thanks.
- Anjali says:
  
  January 7, 2015 at 6:30 pm
  
  Marco,
  
  On x-axis you can do the same by using label property but on y-axis strings are not supported yet.
  - rizky says:
    
    January 14, 2015 at 10:33 am
    
    Hi Anjali,
    
    when can we have the label property on the y-axis?
    - Anjali says:
      
      January 14, 2015 at 8:14 pm
      
      rizky,
      
      We will be implementing it in to 6-8 weeks.
Pingback: Javascript chart library | Schultz Krogshave
Paul Swennenhuis says:

May 19, 2016 at 7:02 pm

Though it is possible to have textual labels on the x-axis – by providing labels for he datapoints – this still leaves you with numerical markers when there is no datapoint. Say, for example, you want month names displayed on the x-axis, and you have datapoints for ‘february’ and ‘april’, but not for march. The ‘february’ and ‘april’ will appear on the x-axis, but not ‘march’. That marker will be displayed as a number.
There is a way to solve this: set a minimum and maximum for the y-axis, make sure all your datapoints are within this range, then add a fake dataseries with datapoints for all months but y values out of range so they will not be displayed. In that case the x-axis does display month names for all markers.