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]" />
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 |