Funnel Chart Card
A horizontal flow funnel in the dashboard card shell. Every stage is a column sized to its share of the top of the funnel that tapers into the next, with a centred percentage pill and a value/name footer; hovering a stage lifts it out by dimming the rest and swaps the headline. Recharts' funnel is a vertical trapezoid stack, so this one is hand-drawn from the same tokens. For the list version see the Stage Bars Card.
Sign-up funnel
197
+5.2%Installation
Funnel Chart Card is part of BoardUI Pro.
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
Shapes and mono
shape="sharp" swaps the eased taper and layered edges for plain trapezoids, and mono paints every stage in the text colour - black on light, white on dark - for a single-ink card. They combine.
{/* Straight-edged trapezoids, no edge layers */}<FunnelChartCard shape="sharp" title="Hiring" ranges={HIRING_RANGES} />
{/* Single ink: mid grey on light, near-white on dark */}<FunnelChartCard mono title="Checkout" ranges={CHECKOUT_RANGES} />
{/* Both */}<FunnelChartCard mono shape="sharp" title="Hiring" ranges={HIRING_RANGES} />Data
stages is a flat { label, value, color? } list, top of the funnel first. Add a stage and it gets a column - widths, necks, percentages, and the footer are all derived. Colours cycle the chart palette unless overridden. The period pill is a dropdown when you pass ranges - each range carries its own data (and optionally delta / headline) and the chart re-animates on selection; onRangeChange lets you fetch instead. With no data props the card ships three demo ranges, which is what the previews above use.
// One entry per stage, top of the funnel first.const stages = [ { label: "Link opened", value: 197 }, { label: "Started", value: 110 }, { label: "Completed", value: 77 }, { label: "Converted", value: 38, color: "var(--color-chart-3)" }, // override any colour];
<FunnelChartCard title="Sign-up funnel" stages={stages} headline={197} // optional resting headline (defaults to the first stage) delta={0.052} // "+5.2%" chip range="Last 30 days" // static pill…/>
// …or a working period dropdown: each range overrides stages / delta / headline.<FunnelChartCard title="Checkout funnel" ranges={[ { id: "7d", label: "Last 7 days", stages: week, delta: -0.018 }, { id: "30d", label: "Last 30 days", stages: month, delta: 0.042 }, { id: "90d", label: "Last 90 days", stages: quarter, delta: 0.097 }, ]}/>