Area Chart

Show volume or composition under a trend line with filled regions.

Area charts share the line-series model: each series carries numeric values and optional stack_group ids. Turn on stacked or percent modes when the story is about contribution, not just the stroke.

  • Cumulative or stacked metrics where filled regions reinforce magnitude.
  • Normalized (100%) stacks when share-of-whole matters — set stack_offset: Expand.
  • Monthly or quarterly trends with multiple contributing series.
  • Assign the same stack_group on series you want stacked per category.
  • Set stack_offset on the chart or any series member — Expand normalizes to 100%.
  • Enable legend and tooltip via cross-cutting previews (charts-legend, charts-tooltip).
  • Leave skip_animation unset to honor reduced-motion preferences.
  • Wrap the chart in a native element with data-testid for E2E hooks.
Stacked area chart

Three series sharing a stack_group with gradient fills. Use when each layer's contribution to the total matters alongside the overall trend.

5k10k15kAmount (USD)JanFebMarAprMayJunJulQuarter
Percent stacked area

stack_offset: Expand normalizes each category to 100% so users compare share, not absolute totals. Best for mix breakdowns (channel, region, product line).

5k10k15kAmount (USD)JanFebMarAprMayJunJulQuarter