/// Charts

FunnelChart

A monochrome-plus-signal funnel chart with sharp trapezoids and inline mono stage labels, recharts-backed.

import { FunnelChart } from "@protocore/pds";

View as Markdown

Import path

FunnelChart ships from the `@protocore/pds/charts` subpath. recharts (>=3) is an optional peer.

import { FunnelChart } from "@protocore/pds/charts";
import { ChartContainer } from "@protocore/pds";

Basics

Pass data as ordered stages of { name, value }, widest first. Each trapezoid is sharp (no rounding), coloured from the ramp with a hairline surface-coloured separator, and labelled inline in mono.

Activation funnel

When to use it

Use FunnelChart for a *monotonically narrowing* progression through ordered stages — visited → signed up → activated → paid. If the parts don't nest (a plain part-to-whole split), use a PercentageBarChart; for unordered category comparison use a BarChart.

Order stages widest → narrowest and reserve a signal hue for the stage whose drop-off matters.

Usage

Order stages widest to narrowest — the funnel implies a monotonic drop.
Keep stage labels short so the inline labels stay legible.
Wrap it in a ChartContainer so it inherits the `--pds-chart-*` ramp.
Spend a signal hue on the stage with the critical conversion.

Don't

Don't use it for non-nesting parts — that's a PercentageBarChart.
Don't round the trapezoids or add shadows; keep the geometry sharp.
Don't import it from `@protocore/pds`; it lives on the `/charts` subpath.
Don't reorder stages out of their real sequence.

Accessibility

recharts renders the plot as SVG; provide surrounding context (a ChartContainer `label` or a data table) for assistive tech.
Stages are labelled inline, so identity does not rely on colour alone.

`FunnelChart` props

Prop	Type	Default	Description
`data` *	`ReadonlyArray<Record<string, string \| number \| null \| undefined>>`	—	One datum per stage; each keyed by `nameKey` (label) and `dataKey` (value).
`dataKey`	`string`	`"value"`	Datum key for each stage's numeric value.
`nameKey`	`string`	`"name"`	Datum key for each stage's label.
`colors`	`string[]`	`--pds-chart-N ramp`	Per-stage colour overrides, in data order.
`height`	`number`	`240`	Chart height in px.
`...rest`	`Omit<RechartsFunnelChartProps, 'data' \| 'children' \| 'width' \| 'height' \| 'ref'>`	—	Remaining props spread onto the underlying recharts `<FunnelChart>`.