Charts
AreaChart
A filled series over a continuous axis, where the area means something.
When to reach for it
Reading one magnitude over time. Comparing several series against each other is a LineChart — four translucent fills stacked on each other answer neither question.
Examples
default
| month | Desktop | Mobile |
|---|---|---|
| Jan | 186 | 80 |
| Feb | 305 | 200 |
| Mar | 237 | 120 |
| Apr | 273 | 190 |
| May | 209 | 130 |
| Jun | 314 | 240 |
fill variants
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
stroke and curve
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
stacking
| Desktop | Mobile |
|---|---|
| 186 | 80 |
| 305 | 200 |
| 237 | 120 |
| 273 | 190 |
| 209 | 130 |
| 314 | 240 |
dots and reveal
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
brush
| day | Desktop |
|---|---|
| D1 | 140 |
| D2 | 164 |
| D3 | 185 |
| D4 | 202 |
| D5 | 214 |
| D6 | 220 |
| D7 | 219 |
| D8 | 211 |
| D9 | 199 |
| D10 | 184 |
| D11 | 169 |
| D12 | 154 |
| D13 | 143 |
| D14 | 136 |
| D15 | 136 |
| D16 | 142 |
| D17 | 155 |
| D18 | 173 |
| D19 | 195 |
| D20 | 219 |
| D21 | 242 |
| D22 | 263 |
| D23 | 280 |
| D24 | 291 |
| D25 | 295 |
| D26 | 293 |
| D27 | 285 |
| D28 | 273 |
| D29 | 257 |
| D30 | 242 |
| D31 | 227 |
| D32 | 217 |
loading
chroma palette
| month | Desktop | Mobile | Tablet |
|---|---|---|---|
| Jan | 186 | 80 | 40 |
| Feb | 305 | 200 | 72 |
| Mar | 237 | 120 | 55 |
| Apr | 273 | 190 | 88 |
| May | 209 | 130 | 61 |
| Jun | 314 | 240 | 96 |
annotations
| month | Desktop |
|---|---|
| Jan | 186 |
| Feb | 305 |
| Mar | 148 |
| Apr | 162 |
| May | 289 |
| Jun | 341 |
empty
No visits in this range
This project had no traffic before March. Try a wider range.
sonify
| month | Desktop |
|---|---|
| Jan | 186 |
| Feb | 305 |
| Mar | 148 |
| Apr | 162 |
| May | 289 |
| Jun | 341 |
Notes
A filled series over a category axis — the shape for a magnitude that is continuous, where the area under the line means something.
Composed rather than configured: axes, grid, tooltip, legend and the areas themselves are children, so a chart renders exactly the parts it asked for and nothing is switched on by a prop nobody can see.
Reach for <LineChart> instead when the reader is comparing several series against each other rather than reading one total, and for <BarChart> when the categories are discrete.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | The composed parts — axes, grid, tooltip, legend, and the marks themselves. | |
| configrequired | TConfig & ValidateKeys<TData, TConfig> | Series keys → their label and paint. Declaration order is ramp order. | |
| 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' | The intro wipe every `<AreaChart.Area>` inherits. |
| chartProps | ComponentProps<typeof RechartsAreaChart> | 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' | The curve every `<AreaChart.Area>` inherits. |
| 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. |
| loadingPoints | number | How many points 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. | |
| stackType | AreaStackType | 'default' | How several marks combine: side by side, stacked, or normalised to 100%. |
| xDataKey | keyof TData & string | The row field on the category axis. Needed by the brush and by the table view. |
Types
export type ChartCurveType = ComponentProps<typeof RechartsArea>['type']
export type AreaVariant = 'gradient' | 'gradient-reverse' | 'solid' | 'dotted' | 'lines' | 'hatched'
export type AreaStrokeVariant = 'solid' | 'dashed' | 'animated-dashed'
export type AreaStackType = 'default' | 'stacked' | 'expanded'Keyboard
| Key | Does |
|---|---|
| Tab | Reaches the plot, which Recharts’ accessibility layer makes navigable. |
| ←→ | Moves the cursor between points, announcing each. |
Accessibility
- title is required and becomes the figure’s accessible name, printed or not.
- The rows are rendered again as a visually hidden table, so the numbers are reachable rather than only drawn. hideDataTable opts out when the page already prints them.
- Six fill variants exist because in the monochrome default TEXTURE is the primary carrier of identity and the grey ramp is the second — which is also what keeps two series apart in greyscale print and under forced colours.
- The intro reveal is a per-frame SVG mask and is dropped entirely under prefers-reduced-motion, as is the crawling dash.