ScatterChart
Composable cartesian primitives for Recharts scatter plots.
Quick Preview
Price vs. size
Lekki listings · sqm by ₦m
Usage
<ScatterChart config={config}>
<ScatterChartGrid />
<ScatterChartXAxis dataKey="size" name="Size" unit="sqm" />
<ScatterChartYAxis dataKey="price" name="Price" unit="₦m" />
<ChartTooltip content={<ScatterChartTooltipContent />} />
<ScatterChartSeries data={data} name="Lekki" />
</ScatterChart>Unlike bar-chart and line-chart (which export layout hooks to spread onto raw
Recharts elements), the scatter chart ships composable wrappers: each primitive
bakes in the giddaa defaults and forwards every Recharts prop, so you override
in place or swap in the raw Recharts element when you outgrow a wrapper. Frame
it with ChartCard/ChartHeader and reuse the shared ChartTooltip and
ChartLegend overlays from chart.
A scatter plot has no shared category row: each ScatterChartSeries carries
its own data array of { x, y }-shaped points, and both axes are
quantitative (type="number" by default).
A scatter point carries one value per axis, so the shared ChartTooltipContent
(built for a single hero value) isn't the right fit — use the dedicated
ScatterChartTooltipContent instead. It lists every axis entry, each labelled
by its XAxis/YAxis name/unit, under one series dot.
Examples
Default ScatterChart
A single series inside the shared chart frame. ScatterChart owns the
responsive plot box and size-scaled type; the grid, axes, and series compose
as children.
Price vs. size
Lekki listings · sqm by ₦m
Multiple Series
Give each ScatterChartSeries its own color (assigned in
SCATTER_CHART_PALETTE order, never cycled — the palette maps to the
theme-aware chart-1…chart-3 tokens) and add the shared legend so identity
is never color-alone.
Neighbourhood price vs. size
Active listings · sqm by ₦m
Customizing the Primitives
Every wrapper forwards its Recharts props: label the axes with name/unit
for the tooltip, pin a domain, or restyle a series in place.
Score vs. rental yield
Pinned domains · custom colour
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
ScatterChart config | ChartConfig | {} | Series labels/icons for the shared tooltip and legend. |
ScatterChart size | "sm" | "md" | "lg" | inherited | Plot height and mark scale, provided to children. |
ScatterChartXAxis dataKey | string | - | Field holding each point's x value. |
ScatterChartXAxis name / unit | string | - | Axis label / unit shown in the tooltip. |
ScatterChartYAxis dataKey | string | - | Field holding each point's y value. |
ScatterChartSeries data | object[] | - | This series' points, e.g. { x, y }. |
ScatterChartSeries color | CSS color | chart-1 token | Resting and active point colour in one prop. |
ScatterChartTooltipContent | - | - | Lists every axis entry (name, value, unit) under one series dot. |
className | string | - | Local layout or spacing overrides. |
| native/root props | Recharts component props | - | Passed through to the wrapped Recharts primitive. |
Accessibility
- Keep
accessibilityLayeron (the default) so the plot is keyboard-navigable and screen-reader labelled. - Add
ChartLegendwhenever more than one series renders; a single series is named by the card title. - Do not communicate state with color alone; include text, icons, or helper copy.
- Points are read comparatively — give
ScatterChartXAxis/ScatterChartYAxisaname/unitand keep the tooltip so exact figures are always reachable.