Area chart

When to use

• Showing total volume over time where the size of the filled area communicates scale (e.g., total responses received across a consultation period)
• Comparing how two or three data streams contribute to an overall total (stacked area)
• Emphasising magnitude rather than precise values — the area fill amplifies the visual weight of the data
• When the data is continuous and has meaningful zero-baseline semantics

When not to use

• Don’t use when precise values matter more than shape — a line chart is easier to read for exact comparisons; add a data table alongside
• Don’t stack more than three series — stacked area charts become difficult to read beyond three layers; the baseline for each layer shifts, making comparisons hard
• Don’t use with negative values in a stacked chart — stacking is only meaningful when all values are positive

Anatomy

• Fill area — The region between the line and the baseline (zero or the layer below in a stacked chart). Use fill with reduced opacity to allow underlying layers to show through.
• Line — The top boundary of the fill area. Gives the chart its shape and is the primary reading aid.
• Baseline — Usually zero. In a stacked chart, each series sits on top of the series below it.
• Tooltip — On hover or focus, shows the value for the specific series at that x-position. In stacked charts, show both the individual series value and the total.

Variants

Single area

One data series. The simplest form; useful for highlighting total volume over time.

Stacked area

Multiple series stacked on top of each other. Shows both total magnitude and relative contribution. Each series must use a distinct colour from the Orbit data visualisation sequence.

Normalised stacked (100%)

Each time interval is normalised to 100%, so the chart shows the relative proportion of each series rather than absolute values. Use when relative composition over time is the focus.

Accessibility

• Fill opacity — Keep fill opacity between 0.6 and 0.85. Too transparent and the area fails WCAG 1.4.11 non-text contrast; too opaque and stacked layers obscure each other.
• Don’t rely on fill colour alone — In stacked charts, use direct labels or a clearly labelled legend. Provide a data table alternative.
• Keyboard access — The line boundary should be keyboard-focusable. On focus, announce the data point value, series name, and x-axis label.
• Avoid misleading scale — Always start the y-axis at zero for area charts. A truncated baseline makes the filled area misleadingly large or small.