Bklit Logo

Scatter Chart

Desktop vs mobile over 24 months with default offset rings and crosshair tooltip

Trending up by 5.2% this month

Scatter Chart - No Rings
Solid fills only — set `strokeWidth={0}` to hide the outer ring

Trending up by 5.2% this month

Scatter Chart - Small Dots
Compact markers with a 2px radius and thin 1px rings

Trending up by 5.2% this month

Scatter Chart - Wide Ring Gap
1px ring, 3px dot, 5px gap between fill and ring (`outlineWidth={0}`)

Trending up by 5.2% this month

Scatter Chart - Left Y axis
Both series share the left scale with Y-axis value labels

Trending up by 5.2% this month

Scatter Chart - Left and right Y axes
Independent left and right scales (biaxial)

Trending up by 5.2% this month

Scatter Chart - Pattern Background
Diagonal pattern fill instead of grid lines

Use Background instead of Grid — see /docs/utility/background

Scatter Chart - Dot Grid Background
Dot grid texture with edge fade

Trending up by 5.2% this month

Scatter Chart - Reference Band
Horizontal Y band behind the series with dashed edges and bracket markers

See /docs/utility/reference-area — tune bounds, fill, and markers in Studio

Scatter Chart - Pattern Reference Band
Pattern fill inside the band with colored Y-axis tick labels

Trending up by 5.2% this month