AREA

filled area (single series). Needs: ordered periods + one non-negative quantity series (optional context line).

trendvolumechange-over-time

DL-01 AGRAW

Use when

one quantity over time where the VOLUME matters (output, throughput, stock)
emphasizing magnitude of change, not just direction
at most one context reference line alongside

Do not use when

comparing several series (use CH-TIM-01; overlapping areas lie)
rates or ratios (area implies quantity; use CH-TIM-01)
composition over time (CH-TIM-04 stacked area when built)

See instead

2+ series compared: CH-TIM-01
cumulative progress vs plan: CH-TIM-02

Alternatives

CH-TIM-01 (line)
CH-TIM-04 (stacked area, planned)

Rules

y starts at zero, no exceptions (a cut baseline lies twice as hard with fill)
one filled series only; fill is primary at the fixed opacity, stroke is primary
context lines allowed, never filled
series labeled at line ends, never a legend
horizontal gridlines only

Never do this

multiple overlapping filled areas
area for rates or percentages
truncated baseline
gradient fills
legend boxes

QA before delivering

y axis starts at zero
exactly one filled series
fill opacity equals the spec value
series labels at line ends, no legend
title states a finding with a number
source line present bottom-left

Data shape

title	string, action title stating the finding with a number
eyebrow	string caps, rendered only when the DL chrome asks for it
source	string, rendered bottom-left, always
unit	string, appears once, on the top y tick label
x	array of ordered period labels
series	exactly one role 'key' (the filled area) + optional 'context' reference lines
annotation	{text, series, index, tx, ty, anchor}, optional

Sample data (golden)

{
  "title": "Monthly output doubled to 412 units in August",
  "eyebrow": "PRODUCTION . JAN-AUG",
  "source": "Source: sample dataset v1, 2026-07-12",
  "unit": " units",
  "x": [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug"
  ],
  "series": [
    {
      "name": "Output",
      "values": [
        205,
        228,
        251,
        280,
        301,
        338,
        377,
        412
      ],
      "role": "key"
    }
  ],
  "annotation": {
    "text": "crosses 400 for the first time",
    "series": "Output",
    "index": 7,
    "tx": 700,
    "ty": 160,
    "anchor": "end"
  }
}