STACKED BAR

vertical stacked bar. Needs: ordered categories + 2 to 4 additive segments per category.

part-to-wholecompositionchange-over-time

DL-01 AGRAW

Use when

how a total splits, tracked across periods or categories
2 to 4 additive segments
the total AND the mix both matter

Do not use when

shares only (use CH-PTW-02, 100% stacked)
more than 4 segments (aggregate or use small multiples)
segments that are not additive parts of a real total

See instead

shares matter more than totals: CH-PTW-02
only one measure per category: CH-MAG-01

Alternatives

CH-PTW-02 (100% stacked)
CH-PTW-05 (treemap, planned)

Rules

segments stack bottom-up in the given order, first segment is the story's key part
total labeled above each column; unit once on the first total
segments identified by swatch + name at the last column, never a legend
4 segments maximum
bars start at zero, always

Never do this

legend boxes
more than 4 segments
stacking non-additive measures
3D depth
rainbow segment colors

QA before delivering

segments <= 4
totals labeled, unit once
segment names at last column, no legend
baseline at zero
title states a finding with a number
source line present bottom-left

Data shape

title	string, action title stating the finding with a number
eyebrow	string caps, rendered only when the DL chrome asks for it
source	string, rendered bottom-left, always
unit	string, appears once, on the first total label
x	array of ordered category labels
series	array of {name, values[] same length as x}, stacked bottom-up in given order, 4 max

Sample data (golden)

{
  "title": "Delivered goods reached 1,284 in week 28, 90% of all items",
  "eyebrow": "PIPELINE . WEEKS 25-28",
  "source": "Source: sample dataset v1, 2026-07-12",
  "unit": "items",
  "x": [
    "W25",
    "W26",
    "W27",
    "W28"
  ],
  "series": [
    {
      "name": "Delivered",
      "values": [
        812,
        946,
        1105,
        1284
      ]
    },
    {
      "name": "In transit",
      "values": [
        128,
        110,
        98,
        96
      ]
    },
    {
      "name": "Pending",
      "values": [
        96,
        71,
        54,
        41
      ]
    }
  ]
}