vue-charts Charts
Area Chart
Build area charts to display quantitative data with filled regions
Area charts display quantitative data with the area between the axis and the line filled with color. They are ideal for showing magnitude of change over time.
Simple Area Chart
A basic area chart with a single data series.
Stacked Area Chart
Use stack-id to stack areas on top of each other.
Gradient Area Chart
Define <linearGradient> inside the chart and reference it with fill="url(#gradientId)".
Step Area Chart
Use type="step" for step-wise transitions.
Area Chart with Legend
Add <Legend> to show series labels.
Change curve type
Set the type prop on <Area> to control interpolation:
| Type | Description |
|---|---|
monotone | Smooth curve preserving monotonicity |
linear | Straight line segments |
step | Step-wise transitions |
natural | Natural cubic spline |
basis | B-spline curve |
AreaChart props
<AreaChart> takes the chart container props, including bar sizing.
Area props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | row path or accessor | required | Field with the value |
type | CurveType | 'linear' | Curve interpolation, see above |
stack-id | string | number | — | Areas with the same id stack |
base-value | number | 'dataMin' | 'dataMax' | — | Where the fill starts |
fill | string | series palette | Fill color |
fill-opacity | number | 0.6 | Fill opacity |
stroke | string | series palette | Outline color; 'none' hides the outline |
stroke-width | number | — | Outline width |
dot | boolean | object | false | 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 |
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.
Area slots
| Slot | Props | Description |
|---|---|---|
#dot | { cx, cy, r, fill, stroke, strokeWidth, … } | Replace a point dot |
#activeDot | { cx, cy, r, fill, stroke, index, dataKey, payload, value } | Replace the active dot |
#label | LabelListSlotProps | Replace a point label |