Line chart

When to use

• Showing how a value changes over a continuous time series (daily, monthly, by campaign phase)
• Comparing trends for two or three metrics over the same time period
• Highlighting rate of change — the slope of the line conveys acceleration or deceleration at a glance
• Displaying cumulative totals or running counts (e.g., total responses received over a consultation period)

When not to use

• Don’t use for categorical comparisons — if the x-axis represents discrete categories (not a time sequence), a bar chart communicates more clearly
• Don’t use with more than five lines — multiple overlapping lines become difficult to distinguish; consider small multiples or a table instead
• Don’t use for sparse or irregular data — a line implies continuity; if data points are few or unevenly spaced, a scatter plot may be more honest

Anatomy

• Line — Connects data points in sequence. Stroke weight and colour identify each series.
• Data points — Optional markers at each data value. Useful when exact values are important or when the number of data points is small.
• X-axis — Represents the time interval (date, week, phase). Labels should be clear and not overcrowded.
• Y-axis — The value scale. Should start at zero unless showing a constrained range (e.g., percentage scores between 60–100).
• Tooltip — Shows exact value on hover or keyboard focus. For multi-line charts, the tooltip should show all series values at the hovered x-position.

Variants

Single line

One metric over time. The simplest and most readable form. Prefer this when the focus is on a single trend.

Multi-line

Two to five metrics on the same axes. Use when comparing trends is the goal. Use the Orbit colour sequence for data visualisation; never rely on colour alone — also distinguish lines by dash pattern or direct labels.

Step line

Connects data points with horizontal-then-vertical steps rather than diagonal lines. Use when the value doesn’t change continuously between measurement points — for example, a threshold or status that applies for a defined period.

Accessibility

• Don’t rely on colour alone to distinguish lines — also use different dash patterns (solid, dashed, dotted) or direct line labels. See Colour in charts.
• Provide a data table — all line charts should have an accessible data table alternative. At minimum, include column headers for each series and row headers for each time interval.
• Keyboard navigation — Data points should be individually focusable. Focus order should follow the data sequence (left to right), and on focus the value and date should be announced.
• Announce meaningful changes — If a line chart updates dynamically (e.g., live engagement data), use an aria-live region to announce significant changes without being noisy.