Scatter Chart

A scatter/bubble chart component built using Recharts v3. Visualize two-variable correlation data with series-based API, bubble mode via zKey, customizable colors, gradients, glow effects, and interactive legend.

Installation

$ npx shadcn@latest add @orecus/scatter-chart

Registry:

@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card

Component

Height vs Weight

Two-group correlation analysis

Price vs Sales Volume

Single series price elasticity

Props

Prop	Type	Default	Description
`series`*	`ScatterSeries[]`	—	Array of series, each with a name and data array
`xKey`*	`string`	—	Data key for x-axis values
`yKey`*	`string`	—	Data key for y-axis values
`zKey`	`string`	—	Data key for dot size (bubble mode)
`zRange`	`[number, number]`	`[4, 20]`	Min/max dot radius for bubble mode
`colors`	`ThemeColor[]`	`["primary", "blue", "green"]`	Theme colors for each series
`variant`	`'default' \| 'gradient'`	`'gradient'`	Stroke style
`glow`	`boolean`	`true`	Add colored glow/blur effect behind dots
`dotSize`	`number`	`6`	Base dot radius (when no zKey)
`shape`	`'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'`	`'circle'`	Recharts native dot shape
`valueFormatter`	`(value: number) => string`	—	Formatter for values in tooltip
`xAxisFormatter`	`(value: number) => string`	—	Formatter for x-axis tick labels
`yAxisFormatter`	`(value: number) => string`	—	Formatter for y-axis tick labels
`xLabel`	`string`	—	X-axis label
`yLabel`	`string`	—	Y-axis label
`showXAxis`	`boolean`	`true`	Show x-axis
`showYAxis`	`boolean`	`true`	Show y-axis
`showGridLines`	`boolean`	`true`	Show grid lines
`showLegend`	`boolean`	`true`	Show legend
`showTooltip`	`boolean`	`true`	Show tooltip on hover
`autoMinValue`	`boolean`	`false`	Auto-calculate min value for axes
`referenceLines`	`ChartReferenceLine[]`	—	Reference lines (targets, thresholds, averages)
`interactiveLegend`	`boolean`	`false`	Allow clicking legend items to toggle series visibility
`legendIndicator`	`'square' \| 'circle' \| 'line'`	`'circle'`	Legend indicator shape
`legendWrap`	`boolean`	`true`	Allow legend items to wrap
`tooltipSortByValue`	`boolean`	`false`	Sort tooltip items by value (descending)
`cardProps`	`CardProps`	—	Props passed to the Card wrapper