Stacked bar chart

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

A stacked bar shows a total per category and how it breaks down. A normalised stacked bar drops the total and shows proportion instead, which is a different question.

Decide which question you are answering before choosing between them.

#When this is the right chart

  • Comparing totals while also showing composition.

  • Proportions across categories, using the normalised form.

  • Status breakdowns across teams, projects or periods.

#What the data needs to look like

Field

Type

Category

Nominal: one bar each

Series

Nominal: the segments

Value

Quantitative

#A worked example

Issue status by team, stacked:

Stacked bar chart

The source, which you can paste into a new diagram and edit:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Open issues by team and status",
  "width": 380,
  "height": 220,
  "data": {"values": [
    {"team": "Platform", "status": "Open", "count": 24},
    {"team": "Platform", "status": "In progress", "count": 12},
    {"team": "Platform", "status": "Blocked", "count": 5},
    {"team": "Apps", "status": "Open", "count": 31},
    {"team": "Apps", "status": "In progress", "count": 18},
    {"team": "Apps", "status": "Blocked", "count": 2},
    {"team": "Data", "status": "Open", "count": 11},
    {"team": "Data", "status": "In progress", "count": 9},
    {"team": "Data", "status": "Blocked", "count": 7}
  ]},
  "mark": "bar",
  "encoding": {
    "x": {"field": "team", "type": "nominal", "title": null},
    "y": {"field": "count", "type": "quantitative", "title": "Issues"},
    "color": {"field": "status", "type": "nominal", "title": "Status"}
  }
}

#A few things that catch people out

  • Only the bottom segment is easy to compare across bars. Put the important one there.

  • For proportions, set the stack to normalize and drop the totals.

  • Three or four segments is the practical limit.

Pick the chart for the question, not for the look.