Charts
Scatter Chart
Plot data points on an X-Y plane to visualize relationships
Scatter charts display individual data points on a two-dimensional plane, useful for showing relationships between variables.
Simple Scatter Chart
A scatter chart with two data series and a size axis.
Usage
Each <Scatter> receives its own data array (unlike other chart types where data is on the chart container):
<ScatterChart>
<XAxis data-key="x" type="number" />
<YAxis data-key="y" type="number" />
<Scatter name="Series A" :data="data01" fill="#8884d8" />
<Scatter name="Series B" :data="data02" fill="#82ca9d" />
</ScatterChart>
Use <ZAxis> to map a third dimension to dot size:
<ZAxis data-key="z" :range="[60, 400]" />
ScatterChart props
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | — | Chart width |
height | number | — | Chart height |
layout | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
Scatter props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array | — | Data array for this scatter series |
dataKey | string | number | Function | — | Key for Y values |
name | string | — | Name for legend/tooltip |
fill | string | — | Dot fill color |
line | boolean | false | Connect dots with a line |
shape | string | 'circle' | Dot shape (circle, cross, diamond, square, star, triangle, wye) |
hide | boolean | false | Hide the scatter |
isAnimationActive | boolean | true | Enable animation |
transition | AnimationOptions | — | Animation timing (motion-v) |
ZAxis props
| Prop | Type | Default | Description |
|---|---|---|---|
zAxisId | string | number | 0 | Unique ID for the Z axis |
dataKey | string | number | Function | — | Key for Z values |
type | 'number' | 'category' | 'number' | Axis data type |
range | [number, number] | [64, 64] | Min and max dot size |
domain | AxisDomain | — | Custom domain for the axis |
scale | string | Function | 'auto' | D3 scale type |
name | string | — | Axis name for tooltip display |
unit | string | — | Unit string appended to values |