Area Graph

Description

An area graph is a line graph with the region between the line and the baseline filled with color or shading. This fill transforms the visual emphasis from the line’s trajectory (rate of change) to the enclosed area (cumulative magnitude). The result draws the viewer’s attention to the volume of values over time, making area graphs well suited for conveying a sense of total quantity or accumulated weight.

The filled area leverages the visual system’s sensitivity to enclosed regions, giving the chart a stronger visual “mass” compared to a plain line. This makes area graphs effective for communicating that “this much happened” rather than just “this is how fast it changed.” However, the filled area can also create a misleading impression of volume in cases where the y-axis does not start at zero, so area graphs should always have a zero baseline.

A single-series area graph is straightforward, but the format truly shines when stacked to show how multiple components contribute to a total over time (stacked area graph). In this configuration, the overall height shows the total, while individual layers show each component’s contribution.

Area Graph — interactive example

When to Use

Emphasizing the cumulative volume or magnitude of a value over time
Showing how a total is composed of parts over time (stacked area)
When the “weight” or “mass” of the data matters more than precise point values
Comparing two series where one is consistently larger, using the filled area to highlight the gap

When NOT to Use

When precise value reading at individual time points is important — a line graph is less cluttered
When multiple overlapping series would obscure each other — use a line graph or small multiples
When data does not have a meaningful zero baseline — the filled area distorts perception
For comparing categories at a single point in time — use a bar chart

Anatomy

Area fill: The shaded region between the data line and the baseline. Color, opacity, and gradient can be customized.
Boundary line: The upper edge of the filled area, identical to a line graph’s line mark.
X-axis: The continuous dimension (usually time).
Y-axis: The quantitative measure. Must start at zero for the area encoding to be honest.
Baseline: The bottom edge of the area, typically the x-axis (y = 0).
Legend: Needed for multi-series or stacked area graphs.
Grid lines: Horizontal lines help estimate values within the filled region.

Variations

Stacked area graph: Multiple series layered on top of each other, showing part-to-whole composition over time. The total is the top of the stack.
Percent stacked area graph (100% area): Each time point is normalized to 100%, showing how the proportion of each component changes over time.
Streamgraph: A stacked area chart with a varying baseline centered around the x-axis, creating an organic, flowing shape. Emphasizes pattern and aesthetics over precise reading.
Difference area graph: Fills the area between two lines with different colors depending on which line is higher, highlighting periods when one series exceeds the other.
Small-multiple area graphs: Separate area graphs for each series arranged in a grid, avoiding the occlusion problem of overlapping areas.

Code Reference

// Observable Plot - stacked area chart
Plot.plot({
  marks: [
    Plot.areaY(data, Plot.stackY({
      x: "date",
      y: "value",
      fill: "category",
      tip: true
    })),
    Plot.ruleY([0])
  ],
  x: { type: "time", label: "Date" },
  y: { label: "Value" },
  color: { legend: true }
})