Preview Updated 2026-05-10

Funnel chart

Step-by-step narrowing conversion funnel with absolute values per step.

Basic usage

Data is passed in via props. Pure SVG rendering, no third-party chart library dependency. Colors come from the --viz-1..8 tokens and are colorblind-friendly.

src/App.vue vue

<CfFunnelChart ... />

src/App.tsx tsx

<CfFunnelChart ... />

Healthy vs leaky funnel

A healthy funnel (30–50% drop per step) versus a leaky funnel (92% drop right after the first step).

健康漏斗（12% 付费）

流失严重（0.4% 付费）

src/App.vue vue

<CfFunnelChart :steps="good" />
<CfFunnelChart :steps="bad" />

src/App.tsx tsx

<CfFunnelChart steps={good} />
<CfFunnelChart steps={bad} />

API

Prop	Type	Default	Description
`steps`	`FunnelStep[]`	`—`	{ label, value }[]; values decrease from top to bottom
`width / height / showLabels`	“	“