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 |
ZAxis props
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | number | — | Key for Z values |
range | [number, number] | [64, 64] | Min and max dot size |