vue-charts 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]" />
Name the series in the tooltip
The default tooltip lists the axis values, as Recharts does, so only the color separates the series. Each row also carries the series name as seriesName, which you can show as a heading with label-formatter:
<Tooltip :label-formatter="(_, payload) => payload[0]?.seriesName" />
ScatterChart props
<ScatterChart> takes the chart container props. Its tooltip
shows one point at a time.
Scatter props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array | the chart's data | Rows for this series |
data-key | row path or accessor | — | Field with the value; usually set on the axes instead |
fill | string | series palette | Dot fill |
shape | 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'circle' | Dot symbol |
line | boolean | object | false | Connect the dots with a line |
line-type | 'joint' | 'fitting' | 'joint' | joint connects the points, fitting draws a linear regression |
line-joint-type | CurveType | 'linear' | Curve of a joint line |
label | boolean | object | false | Show a value label on every dot |
x-axis-id, y-axis-id, z-axis-id | string | number | 0 | Axes this series uses |
name | string | number | — | Name in the legend and tooltip |
legend-type | LegendType | 'circle' | Legend icon |
tooltip-type | 'none' | — | Set 'none' to leave the series out of the tooltip |
hide | boolean | false | Hide the series |
class | string | — | Class on the series layer |
is-animation-active | boolean | the chart's value | Animate this series |
transition | ChartTransition | the chart's value | Timing and easing of data changes |
Events: @click, @mouseenter, @mouseleave with (point, index, event), and @animation-start, @animation-end.
Scatter slots
| Slot | Props | Description |
|---|---|---|
#shape | ScatterPointItem & { index, isActive } | Replace a dot |
| default | — | <Cell> for per-dot colors, <LabelList>, <ErrorBar> |
ZAxis props
| Prop | Type | Default | Description |
|---|---|---|---|
z-axis-id | string | number | 0 | Unique ID for the Z axis |
data-key | row path or accessor | — | Field with the Z value |
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 |