Area
Filled Cartesian series — curves, gradient, stacked, axes, and dense day plots.
Area charts fill under a path so magnitude reads as volume. Compose AreaClosed / AreaStack with the same scale and axis helpers as Line.
Reach for Area when fill carries the story. Prefer Line for thin multi-series trends without fill, and Bar for discrete columns.
When to use
- Single-series volume over time
- Stacked or expanded stacks that show channel mix
When not to use
- Many overlapping series without stacking → Line
- Category comparison without a continuous domain → Bar
Common examples
Natural
Monotone fill under the visitors series.
Linear
Straight-edge filled segments.
Step
Step-filled area between months.
Gradient
Soft fill that fades toward the baseline.
Stacked
Absolute stack of desktop, mobile, and other.
Expanded
100% stack — offset="expand" normalizes each month to share of total.
Axes
Left and bottom axes framing the series.
Dense
Day-level series in a fluid ParentSize host with width-aware X ticks.
Ask your agent
Add a filled area chart for monthly visitors with a soft blue gradient.Related
- Line — stroke-only trends
- Bar — discrete columns
- Responsive — fluid hosts
Last updated on