FunnelChart

Stage-by-stage conversion trapezoids with on-stage labels, values, and conversion percents.
The stages stack as a column of centered trapezoids, each stage's top width proportional to its value and tapering to the next stage's width (the last stage is rectangular), ramp-colored, with the stage's label, value, and conversion percent as text on the stage. The percent reads against the previous stage by default; share reads every stage against the first. Press a stage to select it (the others dim).
iOS
Android
Web
tsx
<FunnelChart
stages={[
{ label: "Visits", value: 12400 },
{ label: "Signups", value: 4200 },
{ label: "Activated", value: 1850 },
{ label: "Paid", value: 480 },
]}
/>

Props

Prop
Description
stages
required
StackedSegment[]
Ordered stages, widest first.
title
string
Optional heading shown above the funnel.
share
boolean
Show each stage as a share of the FIRST stage instead of the conversion from the previous stage.
compact
boolean
Density (omit for the default funnel height).
formatValue
(v: number) => string
Formats stage values (data formatting, not styling).
selected
number | null
Press-to-inspect: the selected stage index (controlled). Pass null for none.
defaultSelected
number
Press-to-inspect: the initially selected stage (uncontrolled).
onSelect
(index: number | null) => void
Fired when a press selects a stage (or clears it with null).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

FunnelChart

Don’t
A funnel that widens mid-way is not a funnel; a stage exceeding its predecessor warns and reads as an error.
Do
Signup funnel
Order the stages widest first and let the taper carry the drop-off.
← DepthChart
Gauge →