Skip to content
TablePage.ai Open the app

How to Read an Area Chart Without Mistaking Its Values

Understand standard, stacked and 100% stacked area charts with a worked table, then prepare the underlying data for a clear public page.

Share X in f
Wei Hu

An area chart is a line chart with shading beneath the line. It usually shows how a quantity changes over time; the shading emphasizes its magnitude. In a stacked area chart, the colored bands add up to a total. The important distinction: a band’s value is its vertical thickness, not necessarily the height of its upper edge. Google’s area-chart guide describes the standard, stacked and percentage-stacked versions.

If you are trying to understand a chart beside a published dataset, first check which version you are looking at.

Three versions, three different readings

For nonnegative values such as counts or sales, read the three common versions this way:

Chart type What to read at a particular date What it answers
Standard area Height from zero to the series line How large is this quantity, and how is it changing?
Stacked area Thickness of each band; top edge for the total How much does each group contribute to the total?
100% stacked area Each band’s percentage thickness How is the composition changing?

In an overlapping, unstacked area chart, each series is shaded down to the same baseline. Overlapping colors do not represent extra categories, and the highest line is not a combined total. A line chart is often clearer when comparing separate series. Atlassian’s guide explains this distinction and the ambiguity overlapping fills can create.

A small table makes the stacked chart easier to understand

Here is an illustrative dataset, not measured TablePage usage. It counts downloads of a public dataset in two mutually exclusive formats:

Month CSV downloads XLSX downloads Total downloads
2026-01 40 20 60
2026-02 60 20 80
2026-03 80 20 100

Imagine a stacked area chart with CSV at the bottom and XLSX above it.

  • January: CSV extends from 0 to 40. XLSX extends from 40 to 60, so its value is 60 − 40 = 20.
  • February: CSV extends from 0 to 60. XLSX extends from 60 to 80, still 20.
  • March: CSV extends from 0 to 80. XLSX extends from 80 to 100, again 20.

The XLSX band moves upward, but XLSX downloads have not increased. Its baseline moves because CSV downloads increase. This is why upper bands can be hard to interpret: their boundaries reflect cumulative values across the stack. Only the bottom band has a fixed zero baseline. Atlassian documents this reading problem.

The top edge shows monthly totals of 60, 80 and 100. It does not show a running total across months. Shading does not make a dataset cumulative; that depends on the values supplied.

What changes in a 100% stacked chart?

Each month is rescaled to 100%. XLSX’s share becomes:

  • January: 20 ÷ 60 × 100 = 33.3%
  • February: 20 ÷ 80 × 100 = 25%
  • March: 20 ÷ 100 × 100 = 20%

The share falls while the count stays constant. A percentage-stacked chart cannot, by itself, tell you whether the overall total grew or shrank. Use it when composition matters, and provide totals separately when volume also matters. Google recommends this version when the total is not the focus.

Prepare the table so readers can check the chart

For a spreadsheet-backed public page, use one row per time period and one numeric column per series, with clear headers. That structure matches Google’s documented area-chart input format.

Before sharing:

  • Sort periods chronologically and identify the interval—monthly, quarterly or daily.
  • Stack only compatible parts of one total. Do not add revenue to visitor counts or stack categories that double-count the same records.
  • Keep a total column for checking, but exclude it from the plotted stack when the component columns already sum to that total.
  • Distinguish missing observations from zero. Do not silently replace an unknown count with no activity.
  • Use a zero baseline for ordinary magnitude-based area charts. Truncating it distorts the apparent sizes of the shaded regions. Atlassian explains why.
  • Publish the underlying values and context: units, source, coverage period and whether the chart shows counts or percentages. Share only data suitable for public access.

Choose a stacked area chart when the reader needs total size plus composition over time. Choose lines when the reader needs to compare each group’s trend precisely. For the broader table-and-chart publishing task, see how to turn a spreadsheet into a useful public page.