Area Charts Design

Design area charts to convey cumulative trends and compositions for AI

Use area charts to show cumulative totals or stacked compositions over time (e.g., AI funding by region). For single series, ensure baseline at zero.

Avoid for fine-grained comparisons—use lines instead. Stacked & Normalized Areas

Stacked areas show absolute contributions; 100% stacked shows shares.

Color, Opacity, and Overlap

Use brand hues with 60–80% opacity to avoid hiding gridlines. Ensure strong outline or darker stroke for each series. Avoid too many layers (max 5–6).

Annotations & Highlights

Mark notable peaks, dips, and policy milestones. Use callouts above the area.

For forecasts, switch to dashed strokes and lighter fills. Hover/focus tooltips should show total plus per-series breakdown at the hovered point. Allow legend toggles and brush-to-zoom. Clicking pins a snapshot with percentages.

Frequently asked questions