React chart example

Grouped scatter

Compare relationships within and between groups by adding category colours to a scatter plot.

Try a theme
Chart options

Options apply to compatible charts.

Data density

Synthetic sample data · 12 height-and-weight observations across 2 groups.

Loading chart…

What is a grouped scatter plot?

A grouped scatter plot adds a categorical distinction to a two-variable scatter plot, usually through colour. Each point remains an individual observation. The grouping helps readers see whether an overall pattern also holds within each subset of the data.

When to use it

Use it to compare relationships across segments, such as product plans, regions or experimental groups. It can expose clusters that a single-colour plot hides. When a chart contains many groups, separate panels may be easier to follow than a crowded colour key.

Design tips

  • Keep the numeric scales shared across groups so their positions remain directly comparable. Explain what each group label means in the source data.

  • Look at group sizes as well as their positions. A group with few observations can appear more consistent simply because it contains less data.

  • Check within-group patterns before describing a combined trend. A pooled relationship can differ from the relationships inside the groups.

Build this chart in React

Graphy Chart SDK

Add Graphy’s grouped scatter plots to your React app.

Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.

2026 Graphy Technologies Ltd. All rights reserved.

2026 Graphy Technologies Ltd. All rights reserved.

2026 Graphy Technologies Ltd. All rights reserved.