Chart 7 of 15

Treemap

Use it to show how a whole divides across many categories at once, when you want to see the big pieces at a glance. Small blocks lose their labels but stay hoverable and keyboard-focusable.

Live demo

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

Tab through the blocks; hover or focus for amount and share. Labels appear only where a block is big enough.

How to use it

JavaScript
const chart = treemap({
  items: [
    { label: 'Housing',   value: 13850, colour: catColor('Housing') },
    { label: 'Groceries', value: 5120,  colour: catColor('Groceries') },
    { label: 'Travel',    value: 4710,  colour: catColor('Travel') }
  ],
  height: 340,
  onClick: item => openCategory(item.label),
  label: 'Spending by category, last 12 months'
});

Options

items
[{ label, value, colour }]. Zero and negative values are dropped; sorted largest first.
height
Chart height (width follows the container).
onClick
(item) => void.
setPatterns(true)
Adds a texture per block so colour is not the only cue.