Charts
AreaChart
A filled series over a continuous axis, where the area means something.
Usage
When to reach for it
Ships from@misoto22/design/charts
import { AreaChart } from '@misoto22/design/charts'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.
Anatomy
| Element | Description |
|---|---|
| Figure framerequired | The <figure> ChartFigure draws, named through aria-labelledby rather than left to the figcaption, because deriving a name from a <figcaption> resolves in only some screen readers. The caption holds title and description together and is sr-only until showTitle is set, so a caveat written into description is announced and never printed. |
| Plotrequired | ChartContainer: a 16:9 box floored at 13rem and capped at 26rem, and the one place Recharts’ hard-coded #ccc axis and grid strokes are re-pointed at --chart-grid and --chart-axis. |
| Areasrequired | <AreaChart.Area>, one per series. Each generates its own id and scopes its gradient, its texture pattern and its reveal mask under it, so six variants share a plot without one overwriting another’s definitions. |
| Brush strip | <AreaChart.Brush>, rendered in the container’s footer rather than inside the SVG. Both handles are role="slider" with aria-valuetext naming the row they sit on, so the window is reachable by arrow key. |
| Toolbar | <AreaChart.Toolbar>, a role="group" row of at most five 44px icon buttons above the plot. Composing it also switches the plot’s own wheel, drag and keyboard zoom on, and the two drive one window rather than two. |
| Hidden data table | An sr-only <table> built from the FULL data rather than the brushed window, so a reader on the table is never shown less than the CSV export holds. hideDataTable removes it, and zero rows render nothing. |
Best practices
Do
- Stack only quantities that genuinely add up. Under stackType="stacked" a band’s HEIGHT is its own value but its POSITION is the sum of everything under it, so stacking four independent rates draws a running total nobody measured.
- Reach for stackType="expanded" when the reading is share rather than volume: it sets Recharts’ expand offset and <AreaChart.YAxis> swaps in percentTick on its own, so the axis reads 0% to 100% without a formatter at the call site. A tickFormatter of your own still wins — the axis defers to it rather than dropping it, which it used to do without a word.
- Vary variant before the ramp on a two-area chart. The six fills are the primary encoding in the monochrome default, and under forced colours every --series-* token resolves to CanvasText — at which point the texture is the only thing left separating two areas.
- Pass xDataKey. It is the rowKey of the hidden table, and without it the table renders no row-header column at all: a screen reader gets a column of numbers with no month beside them.
Don’t
- Four translucent fills over each other is this form’s failure mode — the third area is read through two layers of --chart-fill and its own height stops being recoverable. Several series compared against each other is a LineChart, where nothing occludes anything.
- connectNulls defaults to false for a reason: turned on, a gap in the data is drawn as a straight segment indistinguishable from a measured flat period. Set it only where the gap is a rendering artefact rather than a missing observation.
- A single row draws nothing. One point has no segment to fill, dot is false unless <AreaChart.Dot> is composed, and the empty state does not fire because there IS a row — so the axes render over a blank plot.
Examples
default
Two series, two textures. In the monochrome default the fill is the primary thing that tells them apart and the grey ramp only supports it, which is also what survives a greyscale print and a colour-blind reader. Reach for an area rather than a line when the quantity under the curve is itself the reading.
| month | Desktop | Mobile |
|---|---|---|
| Jan | 186 | 80 |
| Feb | 305 | 200 |
| Mar | 237 | 120 |
| Apr | 273 | 190 |
| May | 209 | 130 |
| Jun | 314 | 240 |
fill variants
The six fills, cycled on one series so the differences are comparable. With no hue to spend, this is the axis that separates two areas before the ramp does, so a chart with more than one area should vary this before it varies anything else. gradient is the default and dissolves toward the axis, solid reads as a band rather than a slope, and the three textures are the ones that still separate two series in a greyscale print.
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
stroke and curve
The two axes of the line itself, and they sit at different levels: strokeVariant belongs to one area, curveType belongs to the whole chart. animated-dashed is a SMIL loop, which the stylesheet's reduced-motion rule cannot reach, so the component gates it and drops it entirely rather than merely slowing it. The curve is the setting that changes what the picture claims rather than how it looks — step says nothing was measured between two rows, monotone says the quantity moved smoothly, and the rows cannot tell you which is true.
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
stacking
Three different questions, not three looks: default compares two series, stacked reads their total, expanded reads their share — and the value axis switches to percentages on its own for the third. What stacking hides is the baseline: only the bottom band still sits on a straight line, so every band above it is a shape whose rises and falls are partly the band beneath it, which is why default is still the setting for "did mobile grow".
| Desktop | Mobile |
|---|---|
| 186 | 80 |
| 305 | 200 |
| 237 | 120 |
| 273 | 190 |
| 209 | 130 |
| 314 | 240 |
dots and reveal
Markers and the intro wipe are one subject because they share one mask: it covers the area's fill, its stroke and its resting dots together, so the markers arrive with the line instead of popping in ahead of it, which is what happens when the two are animated apart. The key on the chart is what replays the reveal — changing animationType alone would not remount the area. A reveal is a per-frame animated SVG mask and the heaviest thing in the package, which is why none is a real answer and is also where an OS reduce-motion preference lands.
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
brush
Thirty-two days is past what one plot can show at once, and a brush is the answer that keeps the whole series visible while the reader picks a slice of it. It is a child rather than a showBrush prop, and both handles are real slider controls: tab to one and the arrow keys step it, Home and End jump it to the ends, where the shape this was ported from was pointer-only. The cost is a second miniature plot under the chart and the height it takes, so a chart of six rows does not want one.
| 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
One of the two states a real dashboard chart spends most of its life in, and the one that says "not yet" rather than "there is nothing here". The skeleton's rows are seeded from the row index rather than drawn from Math.random, so the server and the client render the same shape and a loading chart does not log a hydration mismatch — and it keeps the chart's measured height, so the page does not jump when the data lands. Under prefers-reduced-motion the travelling highlight is replaced by a flat wash.
chroma palette
The sanctioned way to add hue, and the only one: the attribute on any ancestor re-points the eight series custom properties at a categorical palette validated against both grounds, and nothing in the chart below mentions a colour. The alternative is hand-picked hexes in a config's colors array, which is where an unvalidated, colour-blind-hostile palette gets born. Three of the light steps sit below 3:1 on paper, which is the documented reason the legend is not optional above one series.
| 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
Three layers, drawn in the order editorial charting settled on and fixed by the package rather than by the order they are composed in: the band is context and sits behind the grid, the line is a claim about the data and sits above the marks, and the note explains both and sits above everything, the hover dot included. Most charts that look like they need a second series need a reference line instead — "are we above the line" is a question a threshold answers at a glance and a second series does not.
| month | Desktop |
|---|---|
| Jan | 186 |
| Feb | 305 |
| Mar | 148 |
| Apr | 162 |
| May | 289 |
| Jun | 341 |
empty
The other state a real dashboard reaches within a week — a filter that matches nothing — and the one worth writing a sentence for, because an empty pair of axes is indistinguishable from a chart that failed to load, so the reader reloads the page and it is still empty. Distinct from the loading skeleton: that one says "not yet", this one says "there is nothing here", and it usually has something to do next attached. Pass empty={false} instead to keep the bare axes, for a chart whose emptiness is itself the reading.
No visits in this range
This project had no traffic before March. Try a wider range.
sonify
The hidden data table hands a screen-reader user every number, which is access but not a shape — six figures read one at a time do not say that March dipped, and a run of tones does, in under two seconds. The control announces the point count, the span of the category axis and the two extremes before the first note, so the melody is a measurement rather than a contour. Nothing ever plays until someone presses the button: there is no autoPlay prop and no effect that can begin a run.
| month | Desktop |
|---|---|
| Jan | 186 |
| Feb | 305 |
| Mar | 148 |
| Apr | 162 |
| May | 289 |
| Jun | 341 |
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.