Data viz
Funnel
Stage-by-stage conversion at a glance. Each step shows how many made it through, what share of the top that is, and how much fell away since the last step — for onboarding, sales pipelines, or release readiness. Pure SVG, no dependency.
npx shadcn@latest add @orbit/funnelOverview
The classic tapered shape — hover a stage to isolate it.
Variants
The classic tapered funnel reads as a story of narrowing; the bars variant trades the metaphor for a denser, more precise row layout that fits a dashboard column.
What it reads
Every step carries its absolute count, its conversion from the top of the funnel, and the drop-off since the previous step — the metric that tells you where to focus.
In context
In a dashboard the bars variant sits comfortably beside its own summary — total entered, overall conversion, and the biggest leak.
Theming
The funnel derives a tonal ramp from a single accent — darkest at the top, lightening as it narrows — so it stays on-brand without per-stage color management.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "funnel" | "bars" | "funnel" | Centered trapezoids, or label + track rows for a denser dashboard column. |
| data | { label: string; value: number }[] | — | Stages in order — each must be a subset of the one above. |
| accent | string | "var(--pri)" | Single accent the tonal ramp is derived from (any token or color-mix). |
| showDropoff | boolean | true | Prints the −% lost since the previous stage beside each step. |
| formatValue | (v: number) => string | toLocaleString | Formats the absolute counts. |
| ariaLabel | string | — | Summary for the funnel svg's role=“img”. Defaults to “N stages, first to last, X% overall conversion”. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the root div, including ref and className. |
Usage
A funnel implies a strict sequence where each stage is a subset of the one above it — don't use it for unordered categories.
Keep stages strictly nested
Each step must be a subset of the one above — a lead can’t convert without first existing.
Compare unrelated categories
Bug types or teams aren’t a funnel. Use a bar chart when order and nesting don’t apply.
Lead with the leak
Point readers at the largest drop-off — that’s the stage with the most to gain.
Rely on width alone
The min-width floor keeps labels legible, so always print the value and percent too.
Keyboard & accessibility
The tapered funnel is a labelled image; the bars variant is real text that reads top-to-bottom, and drop-off is always stated in words.