Charts
FunnelChart
Stages that only ever narrow.
When to reach for it
A signup flow, a hiring pipeline, a checkout. When the flow can SPLIT rather than only shrink, it is a SankeyChart — a funnel has one path through it by construction.
Examples
default
| stage | Value |
|---|---|
| Visited | 4,200 |
| Signed up | 1,800 |
| Activated | 900 |
| Paid | 320 |
variant
| stage | Value |
|---|---|
| Visited | 4,200 |
| Signed up | 1,800 |
| Activated | 900 |
| Paid | 320 |
Notes
Stages that only ever narrow — a signup flow, a hiring pipeline, a checkout.
The caveat is the same one every funnel has: the taper encodes a RATIO between neighbouring stages, and the eye reads the enclosed area, so a funnel exaggerates a shallow drop and flattens a steep one. Where the exact fall-off is the point, put the percentages on the stages — <Funnel.Label> does — or use a <BarChart>, which encodes each stage on one honest scale.
Reach for <SankeyChart> instead when the flow can SPLIT rather than only shrink: a funnel has one path through it by construction.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | The composed parts — `<Funnel>`, `<Tooltip>`. | |
| configrequired | ChartConfig | Stage names → their label and paint. Keys must match the `nameKey` values. | |
| datarequired | TData[] | The stages, widest first. Order is the funnel; it is not sorted for you. | |
| dataKeyrequired | keyof TData & string | The row field holding each stage's number. | |
| nameKeyrequired | keyof TData & string | The row field naming each stage. | |
| titlerequired | string | What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed. | |
| chartProps | ComponentProps<typeof RechartsFunnelChart> | Escape hatch onto the raw Recharts chart element. | |
| className | string | Merged onto the figure, last, so a call site can size or space it. | |
| description | ReactNode | A line under the title — the unit, the window, the caveat. | |
| hideDataTable | boolean | false | Drops the hidden table view. Only correct when the page prints the data itself. |
| showTitle | boolean | Prints the title above the plot instead of hiding it from sight. |
Types
export type FunnelVariant = 'stepped' | 'ramp'Accessibility
- title is required; the stages are also rendered as a visually hidden table.
- The taper encodes a ratio between neighbouring stages and the eye reads the enclosed area, so a funnel exaggerates a shallow drop. Compose a Label to print the numbers — that is the relief.
- The default variant holds one fill for every stage and lets the shape carry the drop. A ramp that also darkens each stage encodes the same fact twice.