Preview Updated 2026-05-10

AreaChart

Area chart with stacked mode and smooth-curve support.

Basic usage

Data is passed in via props and rendered as plain SVG — no third-party charting library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

src/App.vue vue

<CfAreaChart ... />

src/App.tsx tsx

<CfAreaChart ... />

Stacked mode

stacked = true stacks the series cumulatively (each value is the sum of all previous series), which is suitable for showing composition; the default false overlays the series for trend comparison.

stacked = false（重叠）

stacked = true

src/App.vue vue

<CfAreaChart :series="series" stacked smooth />

src/App.tsx tsx

<CfAreaChart series={series} stacked smooth />

API

Prop	Type	Default	Description
`series`	`AreaSeries[]`	`—`	{ name?, data: number[] }[]
`stacked`	`boolean`	`false`	Stacked mode
`smooth`	`boolean`	`false`	Smooth curves
`width / height / showGrid / showLabels`	“	“	Same as LineChart