ScatterChart
Scatter plot with variable point radius, multi-series, and hover tooltip.
Category: chart · WCAG 2.1-AA · chart, scatter, plot, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | ScatterChartSeries[] | — | The data series to plot. |
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
r | number | ((d: ScatterDatum) => number) | 4 | Point radius or accessor |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 300 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
xTicks | number | 5 | Approximate number of ticks on the x-axis. |
yTicks | number | 5 | Approximate number of ticks on the y-axis. |
legend | boolean | — | Whether to show the legend. |
tooltip | boolean | — | Enable hover/keyboard tooltip |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no axes, grid lines, or legend. For micro/inline charts. |
annotations | Annotation[] | — | Reference lines, shaded bands, and markers drawn over the plot (e.g. a target/threshold line). |
onSelect | (point: ChartPoint) => void | — | Fired when a point is clicked or activated (Enter/Space) — for drill-down. |
glyph | GlyphShape | ((d, seriesId) => GlyphShape) | — | Point glyph shape (circle/square/diamond/triangle/cross/star) — a fixed shape or a function to encode a category by shape. |
renderer | 'svg' | 'canvas' | 'auto' | svg | Renderer — svg (default), canvas (force), or auto (canvas past ~2000 points). Canvas keeps the full a11y fallback table + keyboard layer. |
visualMap | VisualMapOptions | — | Map each point’s y → CVD-safe colour and/or size via a keyboard-operable legend that filters the visible range. |
toolbox | boolean | ToolboxOptions | — | Render a keyboard-reachable toolbox — PNG/SVG export, a data-view table toggle, and restore (reset the visualMap filter). |
Design tokens
--cascivo-chart-1--cascivo-chart-2--cascivo-chart-3--cascivo-chart-4--cascivo-chart-5--cascivo-chart-6--cascivo-chart-7--cascivo-chart-8
When to use
- Revealing correlation or clustering between two numeric variables
- Plotting many individual observations across a 2D space
When not to use
- Encoding a third magnitude dimension — use BubbleChart
- Showing a trend over ordered time — use LineChart
Examples
Basic scatter chart
import { ScatterChart } from '@cascivo/charts'
const series = [{ id: 'a', label: 'Group A', data: [{x:1,y:2},{x:3,y:4}] }]
<ScatterChart series={series} title="Scatter" />Related components
- BubbleChart — Use when a third size dimension must be encoded
- LineChart — Use when points form an ordered trend over time