Charts
ScatterChartNew in 0.8.0
Scatter and bubble chart with multiple series, optional per-series trendlines, and legend entries that toggle series on and off.
ScatterChartPreview
Dot size
Click a point
Usage
tsx
import { ScatterChart } from "@vesture/react";
<ScatterChart
width={560}
height={340}
trendline
xLabel="Ad spend"
yLabel="Revenue"
series={[{ key: "paid", label: "Paid", points: [{ x: 10, y: 24, size: 8 }, { x: 20, y: 51, size: 30 }] }]}
/>Behavior
- Give a point a size to turn the chart into a bubble chart; sizes are scaled into sizeRange.
- Axis domains default to the nice-rounded data extent. Pass xDomain / yDomain to pin them.
- renderPoint replaces the default circle and receives the pixel center, radius and series color.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| series | { key; label; color?; points: { x; y; size?; label? }[] }[] | — | Required. |
| width / height | number | — | Required, in px. |
| xDomain / yDomain | [number, number] | — | Fixed axis range. |
| xLabel / yLabel | string | — | Axis titles. |
| formatX / formatY | (v: number) => string | — | Tick and tooltip formatting. |
| pointRadius / sizeRange / pointOpacity | number / [number, number] / number | 4 / [4, 18] / 0.75 | Dot geometry for plain and bubble points. |
| trendline | boolean | false | Draw a least-squares line per series. |
| showGrid / showLegend | boolean | true | Toggle chrome. |
| renderPoint | (info) => ReactNode | — | Custom marker. |
| onPointClick | (point, series) => void | — | Makes points clickable. |