Funnel ChartNew

Conversion step by step: each step's value and share, the flow narrowing between them and what dropped. Plain HTML and SVG, no chart library.

$ pnpm dlx shadcn@latest add @dashral/funnel-chart

Visits12,400100%
Product views7,82063.1%63.1% of Visits carried on; 4,580 dropped
Added to cart3,16025.5%40.4% of Product views carried on; 4,660 dropped
Checkout1,94015.6%61.4% of Added to cart carried on; 1,220 dropped
Paid1,31010.6%67.5% of Checkout carried on; 630 dropped

Installation

$ pnpm dlx shadcn@latest add @dashral/funnel-chart

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/funnel-chart.json

When to use

Steps people go through in order, and how many make it to each: visits to payments, sign-ups to active teams.

When not to use

Parts of one whole: Donut Chart.
Values that don't follow one another: Bar Chart or Bar List.

Usage

Each step's label and value; the percentages and what dropped come from the values.

example.tsx

1import { FunnelChart } from "@/components/dashral/funnel-chart"
2
3export default function CheckoutFunnel() {
4  return (
5    <FunnelChart
6      data={[
7        { label: "Visits", value: 8200 },
8        { label: "Carts", value: 2400 },
9        { label: "Paid", value: 960 },
10      ]}
11      aria-label="Checkout funnel"
12    />
13  )
14}

Using the npm package? Import from @dashral/ui/components/funnel-chart instead, here and in the examples; the rest is the same.

Examples

Share of the step before

percent="previous" so the weakest step stands out, with compact numbers.

Signed up48.2K100%
Verified39.6K82.2%82.2% of Signed up carried on; 8.6K dropped
Created a project21.3K53.8%53.8% of Verified carried on; 18.3K dropped
Invited a teammate8.9K41.8%41.8% of Created a project carried on; 12.4K dropped

Checkout funnel card

A dashboard card: the channel eases the bars to their new heights and changes the conversion above.

Checkout funnel

10.0% of visits paid

Visits24,800100%
Carts6,90027.8%27.8% of Visits carried on; 17,900 dropped
Checkout3,70014.9%53.6% of Carts carried on; 3,200 dropped
Paid2,48010%67% of Checkout carried on; 1,220 dropped

API reference

FunnelChart

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`data`	`{ key?: string; label: string; value: number }[]` The steps in order, the first the widest. Required.	—
`percent`	`"first" \| "previous"` What the percentage under each value is of: the first step, or the step before.	`"first"`
`showLost`	`boolean` What dropped since the step before, written in the space above each bar.	`true`
`height`	`number` The bars' height at the first step, in pixels.	`200`
`color`	`string` Any CSS color for the bars and the flow between them.	`"var(--chart-1)"`
`locale / formatOptions`	`string / Intl.NumberFormatOptions` How values are written.	`LocaleProvider's`
`aria-label`	`string` What the chart shows.	`"Funnel chart"`
`classNames`	`{ step?, bar? }` Classes for each step's column and its bar.	—

Accessibility

role="figure" with your label around an ordered list of the steps: each one's label, value and share are text, so nothing depends on the bars.
After the first step, screen readers also hear how many of the step before carried on and how many dropped.
In right-to-left the steps run leftwards and the flow follows them.

Motion

The bars rise in one after another, each value rising into its line with its bar (Text Reveal), and the flow fades in behind them; new data eases the bars and the flow to their new heights while every number counts to its new value. Still with reduced motion.