Funnel Chart
NEWA conversion funnel with per-stage widths, curved drop-off bridges, and a loss chip between every stage. An optional summary line reports overall conversion and the single biggest drop-off, all in hand-written SVG.
Signup funnel
Visit to paid, last 30 days
2.9% overall conversion
Biggest drop: Invited a teammate → Started paid plan −67%
| Stage | Users | % of first stage |
|---|---|---|
| Visited site | 48,200 | 100% |
| Signed up | 15,840 | 33% |
| Created project | 9,120 | 19% |
| Invited a teammate | 4,210 | 8.7% |
| Started paid plan | 1,380 | 2.9% |
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/funnel-chart
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| stages | FunnelStage[] | — | Ordered stages with a label, value, and optional color |
| formatValue | (n: number) => string | Intl.NumberFormat | Formats stage values in the chart, tooltip, and data table |
| showSummary | boolean | true | Shows overall conversion and the biggest drop-off above the funnel |
| animated | boolean | true | Enables bridge, bar, and chip entrance animations |
| ariaLabel | string | auto-generated | Accessible chart description and data table caption |
| className | string | "" | Additional CSS classes for the funnel wrapper |