vue-charts Charts
Line Chart
Build line charts with custom dots, labels, and multiple series
Line charts display data as a series of points connected by line segments.
Simple Line Chart
A basic line chart with a single series.
Multi-Line Chart
Add multiple <Line> components for multi-series charts.
Dashed Line Chart
Use stroke-dasharray for dashed lines.
Step Line Chart
Use type="step" for step-wise transitions.
Line Chart with Dots
Lines show a dot on every data point by default. Set :dot="false" to hide the dots, or pass an object to style them.
LineChart props
<LineChart> takes the chart container props, including bar sizing.
Line props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | row path or accessor | required | Field with the value |
type | CurveType | 'linear' | Curve interpolation (monotone, step, natural, …) |
stroke | string | series palette | Line color |
stroke-width | number | 1 | Line width |
dot | boolean | object | true | Show a dot on every point; an object sets dot attributes |
active-dot | boolean | object | true | Show a dot on the active point |
label | boolean | object | — | Show a value label on every point |
connect-nulls | boolean | false | Draw across missing values |
data | Array | the chart's data | Rows for this series only |
x-axis-id, y-axis-id | string | number | 0 | Axes this series uses |
name | string | number | — | Name in the legend and tooltip |
unit | string | number | — | Unit after tooltip values |
legend-type | LegendType | 'line' | 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.
Line slots
| Slot | Props | Description |
|---|---|---|
#shape | CurveProps | Replace the line path |
#dot | { cx, cy, index, value, payload } | Replace a point dot |
#activeDot | { cx, cy, r, fill, stroke, index, dataKey, payload, value } | Replace the active dot |
#label | LabelListSlotProps | Replace a point label |