'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
ChartsAlea Pro
FunnelChart
How many make it through each step, with the share kept from the first and from the previous step.
import { FunnelChart } from '@alea/pro';
Examples
Sign-up funnel
Each stage shows its value and the share kept from the first step. Arrow keys move through the stages.
One in five visitors starts a trial; one in four trials pays.
Visits12,400 100%
Sign-ups2,610 21%
Trials1,180 9.5%
Paid296 2.4%
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-bg…--alea-focus…--alea-text…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-sm…
Type
--alea-font-size-md…--alea-font-weight-regular…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…--alea-motion-duration-slow…--alea-motion-duration-slower…--alea-motion-ease-out…--alea-motion-spring…
Props
FunnelChart props
How many make it through each step (visits, sign-ups, purchases), with the share kept from the first and the previous step.
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | { label: string; value: number; }[] | - | Stages from the widest to the narrowest. |
className | string | - | Extra class names for the root element. |
description | ReactNode | - | One sentence on what the data shows; read before the chart. |
isLoading | boolean | - | Shows a shimmering placeholder while data loads. |
showTable | boolean | true | Shows the table toggle. Default true. |
stageHeight | number | 44 | Height of each stage in px. Default 44. |
title | ReactNode | - | The title shown above it and read by screen readers. |
valueFormat | ((v: number) => string) | - | Formats values (axis, tooltip, table). |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- States
- Keyboard focusPressed (CSS)
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-funnel.alea-funnel-stage.alea-funnel-bar.alea-funnel-label.alea-funnel-value.alea-funnel-pct- Data attributes
data-contrast=moredata-contrast=normal
Accessibility
- The chart is a figure named by its title and described by its description; the picture has a text summary.
- Tab to the chart, then arrow keys move through the data and each value is announced; Escape leaves.
- The table toggle shows the same data as a real table for everyone who can't use the picture.
Keyboard
| Key | Does |
|---|---|
| Tab | Focuses the chart |
| Left or Right arrow | Previous or next value |
| Home or End | First or last value |
| Escape | Clears the selection |
Do and don't
Do
- Order the steps as people go through them.
- Name each step with what people did: Visited, Signed up, Paid.
Don't
- Don't use it for steps people can skip or take in any order.
- Don't put more than about seven steps.