synthetic
FunnelChart
A narrowing-bar chart: each stage scaled against the first, tapering into the next.
Interview recruitmentFrom first contact to a finished call
In context
Project cardThe funnel beside the project summary
Crew interviews
Twelve calls, one clear pattern.
Owner: Priya Nair
Due 17 Oct, now late.
Recruitment
Props
| Prop | Type | Required | Default |
|---|---|---|---|
stages | FunnelChartStage[] | Yes | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
height | number | undefined | No | 64 |
valueFormat | ((v: number) => string) | undefined | No | (v: number) => Math.round(v).toLocaleString() |
milestones | FunnelChartMilestone[] | undefined | No | [] |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
How it reads
Each stage's width is scaled against the first stage's value and eased into the next. Colours cycle through a built-in palette when a stage has no color. milestones adds a dashed checkpoint line at a stage boundary.
data-rebar-* attributes
data-rebar-component="funnel-chart" on the root <figure>.
Migrating to Ant Design
Not codemod-covered. AntD ships no chart components of its own (it recommends @ant-design/charts), so a funnel is reimplemented against whichever charting library the target project uses.