Bubble Chart

The Bubble Chart is similar to a Scatter Chart but with an extra dimension for the bubble’s radius.

Interactions

On hover a tooltip shows the details of a particular bubble and the bubble’s radius will be displayed on a scale in the key. On click the tooltip and the radius on the scale are fixed, allowing the user to hover over other bubbles for comparison.

Usage

The first column is the label for each bubble. The second and third are the X and Y values, respectively. The fourth column is the bubble’s radius. The fifth column, which is optional, can be used to define groups. If a groups column is used the points will be coloured based upon their group and a key will be present below the scatter to show which colours correspond to which groups.

Bubble charts work well for many sets of data with three measures, one use is plotting latitude and longitude as Y and X, then some property of a location/country as the radius.

Example




	







	
		

			Product
			Supplier price
			Sales price
			Average storage time
			Warehouse
		

	
	
		

			Ice cream
			0.4
			2
			0.5
			Warehouse A
		

		

			Umbrellas
			3.5
			10
			2
			Warehouse B
		

		

			Horse shoes
			0.56
			4.5
			1.4
			Warehouse B
		

		

			Pencils
			0.2
			0.8
			0.1
			Warehouse A
		

		

			Mugs
			1.3
			5
			0.6
			Warehouse B
		

		

			Wizard hats
			6
			20
			0.9
			Warehouse A
		

		

			Light bulbs
			1
			3
			0.2
			Warehouse C
		

		

			Fire extinguishers
			4
			13
			1.8
			Warehouse B
		

		

			Wheelbarrows
			5.5
			7.6
			1
			Warehouse C
		

		

			Deck chairs
			2.8
			6.5
			0.7
			Warehouse B
		

	








Options



The following data attributes are available for a Bubble Chart.




 
data-fm-x-prefix
Adds a prefix to x values (displayed on hover). For example, you may wish to add  the ‘£’ symbol before each number

 
data-fm-x-suffix
Adds a suffix to x values (displayed on hover). For example, you may wish to add  the ‘$’ symbol after each number

 
data-fm-y-prefix
Adds a prefix to y values (displayed on hover). For example, you may wish to add  the ‘£’ symbol before each number

 
data-fm-y-suffix
Adds a suffix to y values (displayed on hover). For example, you may wish to add  the ‘$’ symbol after each number

 
data-fm-size-prefix
Adds a prefix to bubble size values (displayed on hover). For example, you may wish to add  the ‘£’ symbol before each number

 
data-fm-size-suffix
Adds a suffix to bubble size values (displayed on hover). For example, you may wish to add  the ‘$’ symbol after each number

 
data-fm-height
Enforces an explicit height. Expects a value with CCS syntax, e.g. "250px" (see sizing guide)

 
data-fm-width
Enforces an explicit width. Expects a value with CCS syntax, e.g. "800px" (see sizing guide)

 
data-fm-enable-spillover
If "true", the bubble chart will draw some transient elements outside of its configured height and width (see layout guide)