'/%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
WaterfallChart
How a starting amount becomes a final one: each change rises or falls from the running total, and totals stand on the floor.
import { WaterfallChart } from '@alea/pro';
Examples
Profit bridge
What added and what took away, from the starting amount to the total.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-border-control…--alea-focus…--alea-text-muted…
Type
--alea-font-family-body…
Motion
--alea-motion-duration-fast…--alea-motion-duration-slower…--alea-motion-spring…
Props
WaterfallChart props
How a starting amount becomes a final one: what added and what took away (profit bridges, budget changes).
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | { label: string; value: number; isTotal?: boolean | undefined; }[] | - | Steps: a change (positive or negative), or a total bar (isTotal) that shows the running sum. |
className | string | - | Extra class names for the root element. |
description | ReactNode | - | One sentence on what the data shows; read before the chart. |
height | number | 280 | Height in px. Default 280. |
isLoading | boolean | - | Shows a shimmering placeholder while data loads. |
showTable | boolean | true | Shows the table toggle. Default true. |
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 focus
- 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-chart-svgwrap.alea-chart-svg.alea-chart-grid.alea-chart-axis.alea-chart-bargroup.alea-chart-bar.alea-chart-cross- Data attributes
data-dim
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
- Start and end with totals, and show the changes between them.
- Keep rises and falls in the success and danger tones, and say it in the labels too.
Don't
- Don't use it for values that don't add up from one to the next.