08 · Grouped Bars.

Same set of categories, exactly two periods or conditions, and you want the height comparison to be loud. For 3+ periods, switch to small multiples (a row of slope or line charts) — grouped bars at 3+ widths-per-category becomes noisy fast.

Each bar transitions from height: 0 to its target percentage. Stagger 60ms within each pair (left bar before right bar) and 120ms between categories. The within-pair stagger is what tells the eye these two bars belong together before the next pair starts.

volumeQuarterCompare: {
  leftLabel:  'Q3',
  rightLabel: 'Q4',
  leftColor:  'var(--primary-3)',
  rightColor: 'var(--primary)',
  categories: [
    { label: 'ER', left: 10500, right: 12600 },
    // any number of categories
  ],
}

/* CSS — note the nested flex */
.grouped-col  { flex: 1; flex-direction: column; }
.grouped-pair { flex: 1; align-items: flex-end; }
.grouped-bar  { flex: 1; height: 0; }
.visible .grouped-bar { height: var(--h); }