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_groupon series you want stacked per category. - Set
stack_offseton the chart or any series member —Expandnormalizes to 100%. - Enable
legendandtooltipvia cross-cutting previews (charts-legend,charts-tooltip). - Leave
skip_animationunset to honor reduced-motion preferences. - Wrap the chart in a native element with
data-testidfor 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.
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).