Chart 3 of 15

Stacked columns

Use it to show what a total is made of and how that mix changes over time. Keep to eight categories or fewer and let a grey Other absorb the rest.

Live demo

Made-up data. Try the options, then switch to the empty and one-point states.

Focus the chart with Tab, then use ← → Home End to move between columns; Esc closes the tooltip. On a phone, touch a column.

How to use it

JavaScript
setCategoryOrder(['Groceries', 'Housing', 'Eating out', 'Transport', 'Travel', 'Leisure', 'Health']);

const chart = barChart({
  cats: months,
  xlabel: monthName,
  series: categories.map(name => ({
    name,
    colour: catColor(name),        // stable per name; unknown names fall back to grey
    values: byCategory[name]
  })),
  cap: 4200,
  onClick: i => openMonth(months[i]),
  label: 'Spending by category and month'
});
document.querySelector('#host').append(chart, legend(categories.map(n => ({ name: n, colour: catColor(n) }))));

Options

cats / series
As the grouped chart. Series stack in the order given, first at the bottom.
colour
Use catColor(name) so a category is the same colour on every chart. setCategoryOrder(names) fixes the order once.
cap
Clip the axis; tall stacks get a break and a ▲ total.
onClick
(index) => void for drill-down.
setPatterns(true)
Switches every fill to colour plus texture (call before drawing).