Charts / CH-PTW-02
CH-PTW-02 . family PTW

STACKED BAR 100%

vertical 100% stacked bar. Needs: ordered categories + 2 to 4 additive segments; totals normalized away.

part-to-wholesharechange-over-time

DL-01 AGRAW
Delivered share climbed to 90%, up 12 points in four weeks 78% W25 84% W26 88% W27 90% W28 Delivered In transit Pending Source: sample dataset v1, 2026-07-12

Use when

  • how the MIX shifts across periods or categories
  • the key segment's share is the message
  • 2 to 4 additive segments

Do not use when

  • the total matters (use CH-PTW-01; 100% hides growth and shrinkage)
  • more than 4 segments
  • single-period share (a sentence or CH-PTW-06 does it better)

See instead

Alternatives

  • CH-PTW-01 (absolute stacked)
  • CH-PTW-06 (waffle, planned)

Rules

  • all columns equal height; the mix is the message
  • the key (first) segment's share labeled above each column with the % sign
  • segments identified by swatch + name at the last column, never a legend
  • 4 segments maximum
  • the title must state the share shift, not the totals

Never do this

  • using 100% stacked when totals shrink (it hides decline)
  • legend boxes
  • labeling every segment share (label the key segment only)
  • more than 4 segments

QA before delivering

  • columns equal height
  • key segment share labeled with %
  • segment names at last column, no legend
  • title states the share shift
  • source line present bottom-left

Data shape

titlestring, action title stating the share shift with a number
eyebrowstring caps, rendered only when the DL chrome asks for it
sourcestring, rendered bottom-left, always
unitpercent, implied; share labels carry the % sign
xarray of ordered category labels
seriesarray of {name, values[]}, first series is the KEY segment whose share is labeled
Sample data (golden)
{
  "title": "Delivered share climbed to 90%, up 12 points in four weeks",
  "eyebrow": "PIPELINE MIX . WEEKS 25-28",
  "source": "Source: sample dataset v1, 2026-07-12",
  "unit": "%",
  "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
      ]
    }
  ]
}