Chart 4 of 15

Donut

Use it for a handful of parts that add up to one whole, when the share matters more than the exact amounts. Fold small slices into Other; more than six or seven slices want a bar list or treemap instead.

Live demo

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

Tab through the slices; each announces its name, amount and share. Hover or focus a slice to read its share in the centre.

How to use it

JavaScript
const chart = donut({
  parts: [
    { name: 'Housing',   value: 1210, colour: catColor('Housing') },
    { name: 'Groceries', value: 438,  colour: catColor('Groceries') },
    { name: 'Other',     value: 164,  colour: 'var(--c9)' }
  ],
  centre: { value: '£1,812', label: 'September' },
  size: 240,
  onClick: part => openCategory(part.name),
  label: 'Spending by category, September'
});

Options

parts
[{ name, value, colour }]. Order is drawn clockwise from 12 o'clock.
centre
{ value, label } shown in the hole until a slice is hovered or focused.
size
Pixel size of the square (default 220).
fmt
Formatter for the aria-label of each slice.
onClick
(part) => void.