Home/ Cookbook/ Charts/ Funnel

Conversion funnel

Four or five steps narrowing into one — visits to carts to checkouts to buys. The chart that turns "we have a leak" into "we have a leak at step 3".

Charts · 14 of 20 1 primitive · Chart.Funnel ~12 min React · @corelithzw/react

Overview

A vertical stack of trapezoids, each narrower than the last, with the conversion rate between every pair printed alongside.

Every business has a funnel. For e-commerce: visits → product views → carts → checkouts → orders. For onboarding: signed up → invited team → connected data → first action. The funnel chart's job is to make the worst step impossible to miss — the drop from the widest slab to the next-widest is where attention goes first. Pair every slab with the absolute count and the step-to-step conversion rate; people read both.

Reach for it for any sequential, irreversible flow with 3–6 stages. Skip it if the stages aren't strictly ordered (use a stacked bar) or if dropoff is < 10% across the board (the funnel looks like a column and the user wonders why you bothered).

The opinion: annotate step-to-step rates, not just totals. "62% conversion to step 3" is the actionable number; the slab width alone tells you how much, not how leaky.

The chart

Five-step e-commerce funnel for the month. Visitors lose the most ground between "viewed product" and "added to cart".

Required pieces

PrimitiveChart.Funnel BlockStat card

Roadmap: Chart.Funnel ships in v0.2 with auto step-conversion calculation and worst-step highlighting. v0.1-alpha users can compose with inline SVG and the math below.

React snippet

Pass steps with label and value. Step-to-step rates are computed for you.

Chart.Funnel@corelithzw/react

Customising

Horizontal funnel

Lay the funnel left-to-right in a wide card. Same data, different orientation; works inside a header strip.

<Chart.Funnel
  steps={oct}
  orientation="horizontal"
  height={120}
  width={720}
/>

Compared funnels

Two side-by-side funnels — this month vs. last. Same scale, easy to see if a step got worse.

<Chart.Funnel.Compare
  current={oct}
  previous={sep}
  showDelta
/>

Segmented by source

Stack each step by traffic source (organic, paid, direct) to see which source leaks where.

<Chart.Funnel
  steps={oct}
  segmentBy="source"
  segments={['organic','paid','direct']}
/>

In context

Embedded in a "Funnel health" stat hero. The hero leads with overall conversion; the funnel chart sits underneath, dimmed slightly, so the eye reads the number first.

Funnel health · October

2.0% −0.6 pp

Worst step: views → carts at 26% (target 35%)