Funnel chart — Björk UI

Components•Funnel chart

Funnel chart

Conversion through ordered steps, drawn as plain bars from one shared baseline so length is the count. The people lost at each step sit as a hatched run beyond the bar, out to where the step before ended. Step conversion reads in the gutter between bars, overall conversion in the right column, and the step with the steepest drop takes the accent. Pass a comparison period to get a marker at last period's count and the change in points.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/funnel-chart

How to use

import { FunnelChart } from "@/components/bjork-ui/charts/funnel-chart";<FunnelChart  steps={[    { id: "signup", label: "Signed up", value: 12480 },    { id: "connect", label: "Connected data", value: 4920 },    { id: "trial", label: "Started trial", value: 2740 },    { id: "paid", label: "Paid", value: 1480 },  ]}  previous={{ signup: 12020, connect: 4410, trial: 2350, paid: 1190 }}  previousLabel="August"  valueLabel="Accounts"/>

September signup funnel, web
Step	Accounts	Of previous step	Of first step	Lost	August	Step conversion change	Overall change
Signed up	12,480	–	100.0%	–	12,020	–	–
Created workspace	10,610	85.0%	85.0%	1,870	10,100	+1 pp	+1 pp
Connected data (biggest drop)	4,920	46.4%	39.4%	5,690	4,410	+2.7 pp	+2.7 pp
Invited teammate	3,610	73.4%	28.9%	1,310	3,190	+1 pp	+2.4 pp
Started trial	2,740	75.9%	22.0%	870	2,350	+2.2 pp	+2.4 pp
Paid	1,480	54.0%	11.9%	1,260	1,190	+3.4 pp	+2 pp

Options

Platform

Compare to August