Area Chart
ProA line chart with a filled area beneath the line, emphasising volume and magnitude over time. Rendered as SVG with a semi-transparent gradient fill. Supports single and stacked variants for showing cumulative totals. Best for continuous data where the area conveys meaningful quantity.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Single | ||
| Stacked | Multiple series stacked on top of each other, each with a distinct colour fill. | Use for showing how individual contributions sum to a total over time. |
Usage Guidelines
Use semi-transparent fills so stacked layers remain visible.
Overlap more than 4 stacked areas — lower layers become invisible.
Start the y-axis at zero when showing area to avoid misleading volumes.
Use opaque fills that hide underlying data.
Pair colour fills with pattern textures for series differentiation.
Use area charts for unordered categorical data.
Include a hidden data table for screen reader access.
Omit axis labels — context is essential for interpretation.
Code
Design Tokens
Accessibility
- Use role="img" with aria-label and aria-describedby linking to a text summary.
- Include a hidden data table for screen reader access.
- Use pattern fills alongside colour for stacked series differentiation.
- Tooltips should be announced via an aria-live region.