Funnel Chart
.mdHorizontal funnel whose centred bars grow in stage by stage, with conversion from the top and drop-off labelled between stages.
chartfunnelconversiondrop-offanalyticssvg
Installation
$npx shadcn@latest add @geturui/funnel-chart
Usage
usage.tsx
1import { FunnelChart } from "@/components/charts/funnel-chart";
2
3<FunnelChart
4 title="Signup funnel"
5 stages={[
6 { label: "Visited", value: 12000 },
7 { label: "Started signup", value: 4200 },
8 { label: "Verified email", value: 2900 },
9 { label: "Paid", value: 610 },
10 ]}
11/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
stages* | { label: string; value: number }[] | — | Stages from top to bottom. |
barHeight | number | 38 | Bar height in px. |
gap | number | 24 | Space between bars where drop-off is shown. |
valueFormatter | (n: number) => string | — | Formats counts. |
title | string | — | Caption and accessible name. |
Accessibility
- Bars are focusable with labels giving count, share of the first stage and step conversion; arrows move between stages.
- Drop-off is written out with an arrow and the word “drop”, not colour alone.
- Labels move above bars on narrow containers.