02 · Staggered Bars.

Comparing a count or magnitude across a small number of named categories. Service volume, channel breakdown, region totals. The colors cycle through --cat-1…--cat-6 automatically — six is the natural ceiling.

Each bar transitions from height: 0 to its target height with a cubic-bezier ease over 0.9s. Stagger 80ms between columns so the eye reads left-to-right. Each bar's value label fades in synced to its bar's transition delay.

visitsByService: {
  title: 'Visits by service',
  subtitle: 'last 30 days',
  categories: [
    { label: 'Emergency',    value: 4210 },
    { label: 'Orthopaedics', value: 2890 },
    // add or remove freely — colors cycle
  ],
}

const max = Math.max(1, ...cats.map(c => c.value));
const maxBarPx = 121; // 160 − value − label − gaps
cats.forEach((c, i) => {
  const h = Math.round((c.value / max) * maxBarPx);
  // emit --h in PX, not %, see callout
  col.innerHTML = `...<div class="bar" style="--h: ${h}px;">...`;
});