React chart example
Bubble chart
Explore three numeric dimensions at once, using position for two variables and bubble size for the third.
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.
Build this chart in React
Compare with
Use when two numeric measures are enough to answer the question.
Use when categories matter but varying point size does not.
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.