Area Chart ^0.1.15

Line chart with filled area. Supports single series, stacked multi-series, percent-stacked (100%), step mode, and threshold lines.

Basic

<VxAreaChart :data="data" :labels="labels" />

Stacked

Desktop

Mobile

Tablet

<VxAreaChart :data="series" :labels="labels" stacked legend />

Percent stacked ^0.1.15

Normalize to 100% at every point — useful for composition analysis.

Organic

Paid

Social

Referral

<VxAreaChart :data="series" :labels="labels" percentStacked legend />

Reference line ^0.1.15

<VxAreaChart
  :data="data"
  :labels="labels"
  :references="[{ value: 40, label: 'Target', color: '#22c55e' }]"
/>

Step mode ^0.1.15

<VxAreaChart :data="data" :labels="labels" step color="#06b6d4" />

Straight segments

<VxAreaChart :data="data" :labels="labels" :smooth="false" color="#f59e0b" />

Custom opacity

opacity 0.2

opacity 0.9

KPI card

Revenue

$182,480

▲ 24% vs last period

Live / reactive

API

Data shape

type AreaChartData =
  | number[]
  | AreaChartPoint[]          // { x, y }
  | AreaChartSeries[]         // { name, data, color? }

interface AreaChartReference {
  value: number
  label?: string
  color?: string
  dashed?: boolean  // default true
}

Props

Prop	Type	Default	Description
data	AreaChartData	[]	Single or multi-series
labels	(string|number)[]	[]	X-axis labels
height	number	260	Chart height
stacked	boolean	false	Stack series on top of each other
percentStacked	boolean	false	Normalize stacks to 100%
step	boolean	false	Step-line mode
smooth	boolean	true	Smooth cubic bezier curves
opacity	number	0.6	Area fill opacity
references	AreaChartReference[]	[]	Horizontal threshold lines
color	string	—	Single-series color
colors	string[]	—	Multi-series palette
strokeWidth	number	2	Line stroke thickness
grid	boolean	true	Horizontal grid
axis	boolean	true	Axis labels
tooltip	boolean	true	Hover tooltip
legend	boolean	false	Legend below chart
animate	boolean	true	Animated transitions
animationDuration	number	900	Tween duration in ms
yTicks	number	4	Number of y-axis ticks
min / max	number	auto	Force y bounds
formatValue	(v) => string	abbreviates 1.2k	Value formatter

Events

Event	Payload
hover	{ seriesIndex, pointIndex, value }
click	{ seriesIndex, pointIndex, value }