Funnel Chart

Conversion funnel: bar per stage (share of the first stage) with step-to-step conversion.

Import

import { FunnelChart } from '@marbleui/ui'

Props

<FunnelChart>

Prop	Type	Default
data *required	`FunnelStage[]`	`—`
summary *required	`string`	`—`
className	`string`	`—`
valueFormat	`(n: number) => string`	`(n) => n.toLocaleString()`

Usage notes

Drop-off through ordered steps, such as visit → signup → upgrade. Each bar is a share of the first stage and each step shows how many continued. For flows that branch, use SankeyChart.

<FunnelChart
  summary="12,400 visitors, 4,100 started signup, 1,180 activated, 410 upgraded."
  data={[
    { label: 'Visited', value: 12400 },
    { label: 'Started', value: 4100 },
    { label: 'Activated', value: 1180 },
    { label: 'Upgraded', value: 410 },
  ]}
/>

It has no title or “Show data” table. It renders as an ordered list labelled by summary, and each stage’s name, value and percentages are text that screen readers read.
Bar widths and the main percentage are relative to the first stage, the “continued” line to the previous one, so keep stages in order.
Bars use five steps of the sequential palette; later stages reuse the darkest. Labels sit in a 6rem column, so keep them short and unique.
valueFormat formats the counts (default toLocaleString()).

Example source · show

import { FunnelChart } from './funnel-chart'

export const styles = {
  Signup: () => (
    <FunnelChart
      className="w-[32rem]"
      summary="Signup funnel: 12,400 visitors, 4,100 started signup, 2,650 verified email, 1,180 created a project, 410 upgraded."
      data={[
        { label: 'Visited', value: 12400 },
        { label: 'Started', value: 4100 },
        { label: 'Verified', value: 2650 },
        { label: 'Activated', value: 1180 },
        { label: 'Upgraded', value: 410 },
      ]}
    />
  ),
}

Source: packages/ui/src/funnel-chart/funnel-chart.tsx

Catalog