This environment is not optimized for viewing on small or mobile devices. Please view on a larger browser for the best experience.

If you have any questions, please contact us.

Area Chart

Area charts show change over time and display a continuous data set, similar to line charts. Use area charts to express volume, show large differences between categories, or to express part-to-whole relationships.

Types

Single Area Chart

Single area and line charts are similar in that they show how data changes over time. Use an area chart when you need to demonstrate the rise and fall of data over time, or to emphasize volume.

Large & Medium Snapshots (567px+)

Small & Extra Small Snapshots (<567px)

Small width single area chart
The limited size does not allow for the interactive hover tooltip.

Single Hover Behavior

Isolated Hover

When you want to zoom in on a single category, an isolated tooltip allows you to feature more data points for a single category. The other categories fade into the background on hover in order to focus attention on the single category.

Stacked Area Chart

Use a stacked area chart to show changes in a part-to-whole relationship over time.

Large & Medium Snapshots (567px+)

Small & Extra Snapshots (<567px)

Small width stacked area chart
The limited size does not allow for the interactive hover tooltip.

Stacked Hover Behavior

Isolated Hover

When you want to zoom in on a single category, an isolated tooltip allows you to feature more data points for a single category. The other categories fade into the background on hover in order to focus attention on the single category.

Unselected Area (not hovered)
opacity: 30%
Comprehensive Hover

100% Stacked Area Chart

100% stacked area charts focus on proportions of part-to-whole relationships rather than actual values.

Large & Medium Snapshots (567px +)

Small & Extra Small Snapshots (<567px)

Small width 100% stacked area chart
The limited size does not allow for the interactive hover tooltip.

100% Stacked Hover Behavior

Isolated Hover

When you want to zoom in on a single category, an isolated tooltip allows you to feature more data points for a single category. The other categories fade into the background on hover in order to focus attention on the single category.

Unselected Area (not hovered)
opacity: 30%
Comprehensive Hover

Specifications

Anatomy
1) Area
color: Categorical Palette
2) Area Outline
border: 1px solid
border-color: White
3) Area Inactive
opacity: 30%
4) Hover Data Point
border: 1px solid White
color: same as corresponding category area
5) Hover Node
color: Navy
border: none
6) Hover Line
border: 1px solid Navy
7) Tooltip
See Global Elements page for specifications
Size & Spacing