FunnelChart
Centered stage-conversion funnel (lead → deal, signup → activation) with per-stage conversion rates.
Component behavior
FunnelChart displays sequential stage counts and conversion rates. Every item at stage n must have passed through stage n − 1. Bar widths use the first stage as the denominator; row conversion uses the preceding stage.
- Sequential stages where each stage is a subset of the preceding stage.
- Stage conversion rates and drop-off comparisons.
- A stage count that fits in readable rows.
BarChart: categories are independent or can increase between stages.
Stepper: the view shows a user’s current task step.
WaterfallChart: individual additions and removals must be shown.
DonutChart: categories are proportions of one total.
Props
FunnelStage contains label, value, and optional meta. Pass stages in sequence order; the component does not sort them. Bar width is value / stages[0].value.
| Prop | Type | Default | Description |
|---|---|---|---|
stages | FunnelStage[] | — | Top of funnel first. Widths are shares of the first stage's value; bars are centered, giving the funnel its silhouette. Labels are used as React keys, so they must be unique. |
color | string | "var(--m-color-primary)" | Bar color. Opacity decreases from 100% at the first stage to 45% at the last. |
formatValue | (value: number) => string | — | Formats stage values. Defaults to toLocaleString with the en-US locale. |
showConversion | boolean | true | Displays per-stage conversion rounded to a whole percent and overall conversion to one decimal place. False removes both. |
Examples
Conversion funnel
The conversion column displays each stage count divided by the previous count. The first stage has no conversion value. Overall conversion is the last count divided by the first, rounded to one decimal place. meta displays application-supplied secondary text.
Formatting the value column
formatValue defaults to toLocaleString("en-US"). Supply a formatter for other locales, currency, or units. Stage values remain numeric for width and percentage calculations.
Without conversion rates
showConversion={false} hides per-stage and overall conversion percentages. The remaining content uses three columns.
The first stage sets the scale
Changing the first stage rescales all bar widths. The examples use the same later stage counts with different first stages to demonstrate the denominator effect.
import { FunnelChart } from "@solarius/onset";
import type { FunnelStage } from "@solarius/onset";
<FunnelChart
stages={[
{ label: "Leads", value: 2500 },
{ label: "MQLs", value: 1200 },
{ label: "Opps", value: 600 },
{ label: "Won", value: 180, meta: "30% of MQLs" },
]}
color="var(--m-color-ok)"
/>;