Trend review

When to use

Use this pattern when the question the reader has is not "what is my number" but "is this getting better or worse".

Trend surfaces are where consumer health products do their most confident lying. Three points and a line will produce a trend for any dataset; a y-axis truncated to the data range will make a two per cent drift look like a cliff; a seven-day average recomputed nightly will change direction on Tuesday and back again on Thursday. None of this requires bad intent. It is what happens by default.

Signals you are in this pattern:

• The reader is comparing a value to their own history rather than to a range.
• The underlying measure has real day-to-day variation.
• Someone might change a behaviour, or a dose, based on what the line does.

When not to use

• One value, one range. If the question is "is this reading where it should be", that is Result disclosure and a RangeBar.
• Fewer points than your minimum window. Below the window, do not draw a trend at all. Draw the points and say so. This is an Empty and first-use surface, not a sparse chart.
• The change itself is the alert. If a sustained direction crosses a threshold that requires action, that is Alert escalation; the chart is not the delivery mechanism.
• You want chart mechanics. Axis rules, colour and the table twin are Data visualisation. Category colours are not chart colours, and that page says why.
• You want the doctrine. Minimum windows, direction versus valence and the prohibition on inferring cause are Trends and change.

How it works

flowchart TD
A["Reader opens the metric"] --> B{"Enough points for the minimum window?"}
B -->|"no"| C["Show the points, state how many more are needed"]
B -->|"yes"| D["Draw the series with a full, honest axis"]
D --> E{"Is the change larger than the measure's own variation?"}
E -->|"no"| F["Describe as steady; do not name a direction"]
E -->|"yes"| G["Name the direction and the window in words"]
G --> H{"Does the direction have a clinical valence here?"}
H -->|"no"| I["Direction only, neutral colour"]
H -->|"yes"| J["Direction plus status, from the status axis"]
C --> K["Table twin and export available at every state"]
F --> K
I --> K
J --> K

The load-bearing rules:

• A minimum window before the word "trend" is used. The window is a property of the measure, not of the chart component, and it is owned by whoever owns the thresholds. Below it, the surface shows observations, not a direction.
• The axis includes the range, not just the data. Truncating the y-axis to the observed values is the single most effective way to manufacture alarm from noise, and it is the default in most charting libraries.
• Direction and valence are separate. "Down" is not "worse". Weight down, resting heart rate down and haemoglobin down are three different stories, and only the third has an obvious valence. The arrow describes the data; the status colour, where there is one, comes from the status axis and is owned by Clinical status semantics. Never let the sparkline's own colour carry the verdict.
• The words say what the picture says. Every trend surface carries a sentence stating the direction, the size and the window in plain English. A reader who cannot see the chart, or cannot read a chart, gets the same answer.
• No causal language, ever. "Your sleep improved because you walked more" is a claim the product cannot support from observational self-tracked data. State the two series; let the reader draw the arrow.
• Gaps are gaps. Missing days are not zeroes and not interpolated. A line that bridges a three-week gap is asserting three weeks of data that do not exist.

States

Content

The caption is the deliverable. The chart is illustration.

Number formatting, rounding and precision follow Numbers, units and precision. Relative dates ("since June", "14 days ago") follow Numbers, dates and time.

Accessibility

• Every chart ships a table twin. It is an equivalent rather than a download, reachable in the same place, with the same numbers. See Accessible charts.
• The summary sentence is the alt text. The chart's accessible description is the same sentence a sighted reader gets, not "line chart showing resting heart rate".
• Direction is never colour alone. Grayscale must preserve the answer; the word carries it. Verify with Colour independence.
• Interactive points are keyboard reachable with a defined order, and the focused point announces its value, its unit and its date rather than its pixel position.
• Zoom and pinch are additive. The default view must already be readable at 200% text; see Text resizing and zoom.
• No motion on load carrying meaning. A line that animates left-to-right is decoration; under prefers-reduced-motion it is absent, and nothing about the reader's understanding may depend on having seen it.

Research

Updates to this page

Last read through against the system on 2026-09-20. Due for review every 6 months; expiry is reported by pnpm run check:freshness.