Stacked Bar Chart

Description

A stacked bar chart extends the standard bar chart by subdividing each bar into colored segments, where each segment represents a sub-category’s contribution to the total. The full bar height shows the overall total for that category, while the individual segments show the composition. This dual encoding makes stacked bars effective for answering two questions simultaneously: “how big is each category?” and “what is it made of?”

The bottom segment of each bar shares a common baseline, making it the easiest segment to compare across categories. Upper segments float at different vertical positions, making their precise comparison more difficult. This is a fundamental tradeoff: stacked bars sacrifice the readability of individual components in exchange for showing the total and the part-to-whole relationship in a single view.

When the focus is purely on proportions rather than absolute values, a 100% stacked bar chart normalizes all bars to the same height, making it easy to compare the relative composition across categories. This variant is directly analogous to multiple pie charts but with the perceptual advantage of aligned lengths.

When to Use

• Showing both the total and the breakdown of each category simultaneously
• Comparing composition across a moderate number of categories (5-15)
• When there are 2-5 sub-categories whose segments are large enough to see clearly
• Showing how parts contribute to a whole across groups (survey responses, revenue by product line)

When NOT to Use

• When precise comparison of individual sub-categories across groups is essential — use a grouped bar chart instead, which aligns all sub-categories on a common baseline
• When there are many sub-categories (>6) — middle segments become thin slivers that are hard to read
• When totals are not meaningful or comparable — stacking implies additive composition
• When categories are independent and do not decompose into sub-groups — use a plain bar chart

Anatomy

• Stacked segments: Colored rectangles within each bar, one per sub-category. Heights encode the sub-category’s value.
• Bar total: The full height of the stacked bar represents the sum across all sub-categories.
• Category axis: Lists the primary grouping variable.
• Value axis: Quantitative scale; must start at zero.
• Color legend: Maps colors to sub-categories. Essential since segments are not individually labeled on the axis.
• Segment labels: Optional value annotations inside or near each segment, useful when there are few bars.
• Baseline: The bottom of the chart (y = 0) from which all stacking begins.

Variations

• 100% stacked bar chart: All bars are normalized to the same height (100%), showing only relative proportions. Useful for comparing composition when absolute values are less important.
• Horizontal stacked bar chart: Bars extend horizontally, helpful for long category labels and for Likert-scale data.
• Diverging stacked bar chart: Bars extend in both directions from a center point, commonly used for survey data with a neutral midpoint (e.g., Strongly Disagree to Strongly Agree).
• Grouped + stacked: A hybrid where bars are grouped by one variable and stacked by another, for three-level breakdowns.
• Waterfall chart: A related form where segments show sequential additions and subtractions, starting from an initial value and ending at a final total.

Code Reference

// Observable Plot - stacked bar chart
Plot.plot({
  marks: [
    Plot.barY(data, Plot.stackY({
      x: "quarter",
      y: "revenue",
      fill: "product",
      tip: true
    })),
    Plot.ruleY([0])
  ],
  x: { label: "Quarter" },
  y: { label: "Revenue ($M)" },
  color: { legend: true }
})