Examples · Stacked bar chart

Stacked bar chart examples

A stacked bar chart shows the total and its composition at once: each column is a sum, each band a share of it. The examples here also show the same data split into grouped columns — the morph between the two is one click in the maker.

When to use it

Totals that decompose: revenue by product, traffic by source, headcount by team
Watching both the sum and the mix shift over a few periods
Two to four parts per column — enough to stack, few enough to read

Not the right shape?

Precise comparison of the middle bands — only the bottom band sits on a common baseline. Grouped columns compare parts honestly.

Real-world examples

Traffic by source

The total tells one story (growth), the bands tell another (search is doing the growing).

Open in maker with this data

View the spec

{
  "type": "stacked",
  "theme": "glass",
  "title": "Site visits by source (thousands)",
  "source": "Web analytics",
  "data": {
    "labels": [
      "May",
      "Jun",
      "Jul",
      "Aug"
    ],
    "series": [
      {
        "name": "Search",
        "values": [
          42,
          48,
          55,
          63
        ]
      },
      {
        "name": "Social",
        "values": [
          18,
          17,
          19,
          18
        ]
      },
      {
        "name": "Direct",
        "values": [
          18,
          14,
          16,
          17
        ]
      }
    ]
  }
}

The same data, split apart

Grouped columns put every series on the baseline — compare the parts here, read the totals on the stack above.

Open in maker with this data

View the spec

{
  "type": "column",
  "theme": "ink",
  "title": "Revenue by product line, grouped",
  "source": "Finance, unaudited",
  "data": {
    "labels": [
      "Q1",
      "Q2",
      "Q3",
      "Q4"
    ],
    "series": [
      {
        "name": "Subscriptions",
        "values": [
          31,
          34,
          38,
          44
        ]
      },
      {
        "name": "Services",
        "values": [
          12,
          11,
          14,
          15
        ]
      },
      {
        "name": "Licenses",
        "values": [
          8,
          9,
          7,
          10
        ]
      }
    ]
  }
}

Open this chart in a maker Bar graph maker from scratch

Questions people ask

Stacked or grouped — which should I pick?

Stack when the total is the headline and the mix is the detail. Group when readers must compare the parts against each other, because grouped columns all start from the same baseline and stacked bands (except the bottom one) do not.

How many series can a stack hold?

The engine accepts more, but the chart stays readable at two to four. Beyond that the middle bands become slivers nobody can compare — collapse small categories into 'Other' first.