Bubble Chart

A chart that is a type of chart that displays three variables of data. Each entity with its triplet (v1, v2, v3) of associated data is plotted as a bubble whereby two of the values are expressed through the X and Y location and the third through its size. Bubble charts can be considered a variation of the scatter chart, in which the data points are replaced with bubbles.

Status

The status of the component

Documentation in progress

Figma component

A link to the Figma library where the component lives.

Open in Figma

Repository

A link to the repo where the component lives.

Best Practices

Bubble charts are used to show relationships between three numeric variables.

The bubble’s area should correspond with the third variable value.

Do not use a different color for each single bubble. Use the categorical colors - one for each variable/set.

Do not exclude any bubbles from the chart.

Usage Guidelines

Hover

On hover of a bubble, a tooltip appears anchored to the filled bubble.

On hover of a legend item, all other legend items as well as their corresponding bubbles reduce in opacity.

Drilldown

If drilldown is possible via click, the mouse turns to a finger instead, indicating clickability.

Focus

On focus, a focus ring encompasses the bubble with a corresponding tooltip.

Responsiveness

As the chart resizes, bubbles should grow/shrink proportionally.

Something looks broken on this site?

Report it to the Design System team here!