Preview Updated 2026-05-10

BulletChart

Single-value progress bar with a target marker and qualitative bands — better suited than Gauge for "compare against target" semantics.

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

<CfBulletChart ... />

src/App.tsx tsx

<CfBulletChart ... />

Bands + exceeding target

bands provides three colored segments and target draws a vertical line; when the value exceeds the target the bar extends past it.

无质量带

3 段质量带

超过目标

src/App.vue vue

<CfBulletChart :value="92" :target="80" :max="100" :bands="bands" />

src/App.tsx tsx

<CfBulletChart value={92} target={80} max={100} bands={bands} />

API

Prop	Type	Default	Description
`value`	`number`	`—`	Current value
`target`	`number`	`—`	Target value (vertical line)
`max`	`number`	`—`	Maximum value
`bands`	`{ upTo: number; tone? }[]`	`[]`	Qualitative bands (poor/ok/good)
`label`	`string`	`—`