Conversion Funnel

When to use

Funnel charts ship with a lot of visual baggage (trapezoidal segments, angled labels) that don't compose well inside a card. A stack of labeled progress rows reads clearer, hits the same "big → small" shape, and stays accessible: every step is a real DOM element with a percentage. Use this whenever a user needs to see sequential drop-off — onboarding, checkout, activation, paywall.

Four-step funnel

Top step is an explicit 100% baseline (no progress bar — it's the anchor). Subsequent steps use progress-row-ui with the count + percentage in the meta slot.

With segment comparison

Pair the funnel card with a segmented control in slot="action" so users can switch between cohorts (e.g. new-vs-returning, mobile-vs-desktop). Swap the value + meta attributes in setup.js on segment change.

Wide summary with step-over-step delta

For board reporting, combine the funnel with a step-over-step delta column so stakeholders can see exactly where the biggest drop-off happens. Delta is a badge-ui colored by severity.

Variants & knobs

• Step count. Keep to 3–6 steps. Beyond 6 the drop-off numbers lose impact; split into nested funnels.
• Top-row value. Always show the absolute count next to a 100% label — it anchors every subsequent percentage.
• Meta format. meta="count · percent" is the canonical order. Count first reads as data, percent second reads as insight.
• Color coding. Don't tint the progress bars by drop-off severity — it implies "bad" for inherently-lossy funnels. Use a neutral progress color and let the numbers speak.
• Delta column (optional). When step-over-step matters more than overall conversion, add a badge-ui in a sibling column: warning for 20–40% drop, danger above 40%.

Anti-patterns

• Don't use a trapezoidal funnel SVG. The angled geometry burns horizontal space, makes labels hard to align, and provides no precision benefit over a stacked progress pattern.
• Don't fill the bar for step 1. 100% is the anchor, not data. Render it as a plain row so step 2 becomes the first visible drop.
• Don't encode drop-off in bar color alone. CVD users can't distinguish severities by hue — always pair with a numeric badge or explicit text.

Authoring rules

• Steps must be ordered by drop-off severity — widest bar at top (entry), narrowest at bottom (conversion). Do not reorder steps for aesthetic reasons.
• Label every step with the action, not the state. "Started checkout" not "Checkout". The label describes what the user did to enter this stage.
• Always show the percentage alongside the absolute count — absolute numbers without percentages hide relative drop-off; percentages without absolutes hide scale.
• Use chart-in-card pattern for standalone KPI surfaces, not conversion-funnel. Funnels require at least 3 sequential stages and a meaningful conversion event.