Funnel Chart
Visualise drop-off through a sequential process — sign-up flows, sales pipelines, conversion funnels. Each step narrows relative to the first, with optional conversion rates between steps.
Examples
Single colour
Without conversions
Revenue pipeline
Props
data*
FunnelStep[]
Ordered array of steps. First step is the widest (100%).
colors= palette
string[]
Override chart palette colours.
colorMode= 'sequential'
'sequential' | 'single'
sequential = each step gets the next palette colour. single = one colour at decreasing opacity.
showConversions= true
boolean
Show conversion percentage between each step.
valueFormatter= —
(value: number) => string
Format the value label on each step.
stepHeight= 44
number
Height of each step bar in px.
gap= 6
number
Gap between step bars in px.
height= auto
number
Fixed height override. Auto-calculated from steps and gaps by default.
className= —
string
Extra class on the outer container.
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | FunnelStep[] | — | Ordered array of steps. First step is the widest (100%). |
| colors | string[] | palette | Override chart palette colours. |
| colorMode | 'sequential' | 'single' | 'sequential' | sequential = each step gets the next palette colour. single = one colour at decreasing opacity. |
| showConversions | boolean | true | Show conversion percentage between each step. |
| valueFormatter | (value: number) => string | — | Format the value label on each step. |
| stepHeight | number | 44 | Height of each step bar in px. |
| gap | number | 6 | Gap between step bars in px. |
| height | number | auto | Fixed height override. Auto-calculated from steps and gaps by default. |
| className | string | — | Extra class on the outer container. |
FunnelStep
name*
string
Step label shown to the left of the bar.
value*
number
Numeric value. The first step is treated as 100%.
| Prop | Type | Default | Description |
|---|---|---|---|
| name* | string | — | Step label shown to the left of the bar. |
| value* | number | — | Numeric value. The first step is treated as 100%. |