/// Charts
AreaChart
A monochrome-plus-signal area chart with a soft 0.10→0 gradient fill, recharts-backed.
import { AreaChart } from "@protocore/pds";Import path
AreaChart ships from the `@protocore/pds/charts` subpath so recharts stays out of the core bundle. recharts (>=3) is an optional peer; install it in apps that render charts.
import { AreaChart } from "@protocore/pds/charts";
import { ChartContainer } from "@protocore/pds";Basics
Same shape as LineChart — data, xKey, series — plus a vertical gradient fill that fades from 10% opacity at the stroke to 0 at the baseline. The soft fill emphasizes accumulated magnitude without drowning the line.
Multiple series
Each series gets its own gradient keyed off its ramp color. Areas overlap by default (they don't stack) — keep it to two or three series so the fills stay readable, and pass recharts stacking props via ...rest if you need a true stack.
When to use it
Use AreaChart when *volume or accumulation* under a trend is the point — throughput, settled value, depth over time — and the filled region reinforces magnitude. When only the line's slope matters, prefer LineChart (less ink). For discrete categories use BarChart; for a glanceable frameless trend, Sparkline.
The same monochrome-plus-signal doctrine applies (see ChartContainer): overlapping fills muddy fast, so rank series, keep supporting ones grey, and reserve the signal hues.
Usage
Do
- Reserve area fills for metrics where accumulated magnitude matters.
- Keep it to two or three series so overlapping fills stay legible.
- Wrap it in a ChartContainer so it inherits the `--pds-chart-*` ramp.
- Give each series a human `label` for the legend and tooltip.
Don't
- Don't stack many opaque areas — the gradient is faint but overlaps still muddy.
- Don't use it when only the slope matters — a LineChart carries less ink.
- Don't import it from `@protocore/pds`; it lives on the `/charts` subpath.
- Don't rely on fill hue alone to separate series — pair with a legend.
Accessibility
- recharts renders the plot as SVG; provide surrounding context (a ChartContainer `label`, caption, or data table) since the marks are not individually labelled.
- The gradient fill is decorative — series identity rests on the stroke color and the legend, and the ramp keeps a luminance spread for grayscale/CVD readers.
- The default tooltip surfaces per-series values on hover and keyboard focus via recharts.
AreaChart props
| Prop | Type | Default | Description |
|---|---|---|---|
data * | ReadonlyArray<Record<string, string | number | null | undefined>> | — | Row-oriented data; each datum keyed by `xKey` and by every series `key`. |
series * | ChartSeries[] | — | Series to plot, in draw + legend order. `ChartSeries` = `{ key: string; label?: string; color?: string }` — color defaults to `--pds-chart-N` by position. |
xKey * | string | — | Datum key for the x-axis category. |
height | number | 240 | Chart height in px. |
...rest | Omit<RechartsAreaChartProps, 'data' | 'children' | 'width' | 'height' | 'ref'> | — | Remaining props spread onto the underlying recharts `<AreaChart>` (e.g. `margin`, `stackOffset`, `syncId`). |