Preview Updated 2026-05-10

Sparkline

Inline micro trend line, often used as the trend indicator on KPI cards.

Basic usage

Data is passed via props and rendered as pure SVG, with no third-party charting dependency. Colors are drawn from the --viz-1..8 tokens and are colorblind-friendly.

上升 13下降 4平稳 6

src/App.vue vue

<CfSparkline ... />

src/App.tsx tsx

<CfSparkline ... />

8-color palette

colorIndex (0..7) picks any color in --viz-1..8 — colorblind-friendly and aligned with chart series colors.

--viz-1 · indigo--viz-2 · amber--viz-3 · green--viz-4 · red--viz-5 · cyan--viz-6 · magenta--viz-7 · lime--viz-8 · azure

src/App.vue vue

<CfSparkline :data="data" :color-index="0" filled smooth />
<CfSparkline :data="data" :color-index="3" filled smooth />

src/App.tsx tsx

<CfSparkline data={data} colorIndex={0} filled smooth />
<CfSparkline data={data} colorIndex={3} filled smooth />

API

Prop	Type	Default	Description
`data`	`number[]`	`—`	Array of data points
`width / height`	`number`	`80 / 24`
`filled`	`boolean`	`false`	Show filled area
`smooth`	`boolean`	`false`	Smooth curve
`colorIndex`	`0..7`	`0`	Color index (—viz-{n+1})
`showDot`	`boolean`	`true`	Highlight the last point