React chart example
Scatter plot
Reveal relationships, clusters and outliers by plotting two numeric variables for each observation.
Height and weight
Explore the relationship between two numeric variables.
What is a scatter plot?
A scatter plot places each observation according to two numeric values. Horizontal and vertical position show the pair of measurements for the same record. The resulting cloud of points can reveal associations, clusters, unusual observations and ranges.
When to use it
Use a scatter plot to investigate the relationship between two numeric measures across individual observations, such as price and demand or usage and retention. It helps reveal clusters, outliers and patterns that category averages can hide. Use a line chart if the main question is change over time. A relationship in the points does not establish cause and effect.
Design tips
Label both axes with their units and choose ranges that keep the observations visible. Unlike bars, a scatter plot does not always require a zero baseline.
Use small or translucent points when observations overlap. If an axis has only a few distinct values, points can pile up in strips; a grouped bar chart may be clearer when the question is to compare those categories.
Treat an added trendline as a summary, not proof of causation or a reliable forecast. Check for outliers, subgroup effects and nonlinear patterns.
Build this chart in React
Compare with
Use when colour should separate relationships for named groups.
Use when a third numeric measure should control point size.
Graphy Chart SDK
Add Graphy’s scatter plots to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.