React chart example
Bubble chart
Explore three numeric dimensions at once, using position for two variables and bubble size for the third.
Options apply to compatible charts.
Synthetic sample data · 10 observations across 4 continents, with GDP, life expectancy and population.
What is a bubble chart?
A bubble chart extends a scatter plot with a third numeric measure represented by point size. Position still shows two variables, while colour can identify a category. It provides a compact way to explore several dimensions of the same observations.
When to use it
Use it when a third numeric measure adds useful context to a relationship, such as account revenue alongside usage and satisfaction. Choose a size measure that represents a meaningful non-negative amount. If size does not answer part of the question, use a simpler scatter plot. Use labels or hover details when exact size comparisons matter.
Design tips
Explain what bubble size represents and check the size-scale behaviour. Readers generally expect the visible area, rather than the radius, to represent magnitude.
Limit the size range so large bubbles do not conceal most of the smaller ones. Transparency can help, but it does not recover a point that is completely hidden.
Avoid treating four encoded dimensions as four equally precise comparisons. Consider a simpler scatter plot if size adds complexity without answering the question.
Graphy Chart SDK
Add Graphy’s bubble charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.