Charts
ComposedChart
Bars and lines over one axis — the volume, and the rate it moved at.
When to reach for it
Two measures that share a scale. Two that do NOT share one belong in two charts or indexed to a common base: there is no second y-axis here, on purpose.
Examples
default
| month | Revenue | Profit |
|---|---|---|
| Jan | 4,200 | 1,800 |
| Feb | 5,800 | 2,400 |
| Mar | 4,100 | 1,600 |
| Apr | 6,200 | 2,800 |
| May | 5,400 | 2,200 |
| Jun | 7,800 | 3,400 |
variants
| Revenue | Profit |
|---|---|
| 4,200 | 1,800 |
| 5,800 | 2,400 |
| 4,100 | 1,600 |
| 6,200 | 2,800 |
| 5,400 | 2,200 |
| 7,800 | 3,400 |
hover highlight
| Revenue | Profit |
|---|---|
| 4,200 | 1,800 |
| 5,800 | 2,400 |
| 4,100 | 1,600 |
| 6,200 | 2,800 |
| 5,400 | 2,200 |
| 7,800 | 3,400 |
brush and loading
| day | Revenue | Profit |
|---|---|---|
| D1 | 3,200 | 2,700 |
| D2 | 4,378 | 2,644 |
| D3 | 5,426 | 2,480 |
| D4 | 6,229 | 2,217 |
| D5 | 6,699 | 1,873 |
| D6 | 6,783 | 1,468 |
| D7 | 6,473 | 1,027 |
| D8 | 5,803 | 1,221 |
| D9 | 4,846 | 1,649 |
| D10 | 3,708 | 2,031 |
| D11 | 3,886 | 2,342 |
| D12 | 5,005 | 2,564 |
| D13 | 5,924 | 2,682 |
| D14 | 6,544 | 2,689 |
| D15 | 6,796 | 2,586 |
| D16 | 6,652 | 2,377 |
| D17 | 6,128 | 2,077 |
| D18 | 5,282 | 1,703 |
| D19 | 4,206 | 1,279 |
| D20 | 3,380 | 968 |
| D21 | 4,547 | 1,411 |
| D22 | 5,565 | 1,822 |
| D23 | 6,323 | 2,176 |
| D24 | 6,737 | 2,450 |
| D25 | 6,762 | 2,628 |
| D26 | 6,394 | 2,699 |
| D27 | 5,675 | 2,658 |
| D28 | 4,684 | 2,507 |
| D29 | 3,529 | 2,257 |
| D30 | 4,062 | 1,922 |
Notes
Bars and lines over one axis — the shape for "the volume, and the rate it moved at".
One axis, always. Two measures at different scales belong in two charts or indexed to a common base; a second y-scale lets the author choose where the lines cross, which is the single most misleading thing a chart can do.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | The composed parts — axes, grid, tooltip, legend, and the marks themselves. | |
| configrequired | TConfig & ValidateKeys<TData, TConfig> | — | |
| datarequired | TData[] | The rows the chart draws. One entry per point, bar or category. | |
| titlerequired | string | What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed. | |
| animationType | ChartRevealType | 'forward' | — |
| barCategoryGap | number | — | |
| barGap | number | — | |
| chartProps | ComponentProps<typeof RechartsComposedChart> | Escape hatch onto the raw Recharts chart element. | |
| className | string | Merged onto the figure, last, so a call site can size or space it. | |
| curveType | ChartCurveType | 'linear' | How the line between two points is interpolated. Every mark inherits it unless it says otherwise. |
| defaultSelectedDataKey | string | null | null | The series lit on first render. Selection dims every other series. |
| description | ReactNode | A line under the title — the unit, the window, the caveat. | |
| empty | ChartEmptyProps | false | What the chart shows when it has nothing to draw. Rendered instead of the plot whenever `data` is empty and the chart is not loading — the state a real dashboard reaches within a week, and the one an empty pair of axes is indistinguishable from a failed load. `false` keeps the axes, for a chart whose emptiness is itself the reading. | |
| hideDataTable | boolean | false | Drops the hidden table view. Only correct when the page prints the data itself. |
| isLoading | boolean | false | Swaps the marks for an animated skeleton, keeping the measured height so the page does not jump when the data lands. |
| loadingBars | number | How many bars the skeleton draws. | |
| onSelectionChange | (selectedDataKey: string | null) => void | Fires when the selection changes, and with null when it is cleared. | |
| showTitle | boolean | Prints the title above the plot instead of hiding it from sight. | |
| xDataKey | keyof TData & string | The row field on the category axis. Needed by the brush and by the table view. |
Accessibility
- title is required; the rows are also rendered as a visually hidden table.
- One value axis only. A dual-axis chart lets its author choose where the lines cross, which is the single most misleading thing a chart can do.
- enableHoverHighlight dims every bar outside the hovered column, driven by the chart’s own tooltip index.