Donut Chart

Usage

import { DonutChart } from '@wdzyi/ui';

<DonutChart
  title='Spending'
  slices={[
    { label: 'Rent', value: 1150 },
    { label: 'Groceries', value: 412 },
    { label: 'Bills', value: 236 },
    { label: 'Transport', value: 186 },
  ]}
  change={-0.003}
  changeLabel='on October'
  lowerIsBetter
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

slicesDonutChartSlice[]

Each category’s label and value, biggest first. Five or six at most: past that, fold the rest into Other. The first is foil until another is chosen.

titlestring

Over the chart, beside the switch.

periods, period, onPeriodChangestring[], string, function

The periods to switch between, the one shown, and what to do when another is chosen. Swap the slices to match, and each segment moves to its new size.

valuenumber = the slices added up

The number in the middle.

change, changeLabelnumber, string

How far the total moved, as a fraction, and a quieter word on what against. Without a change, there’s none shown.

lowerIsBetterboolean = false

For spending, where going up is the bad news.

format(value: number) => string

How an amount reads. By default, whole pounds.

heightnumber = 200

The donut’s height in px. In a card given a height of its own, it takes what’s left.

Notes

• The segments sweep in clockwise from the top, with two pixels of the card between each. A new period moves each one to its new size, held by its label, so a category keeps its place.
• A segment is picked by its angle anywhere across its band. The one you rest on comes out along its middle and takes the foil, and the rest step back. Press a row to keep it out, and press it again to put it back.
• Focus the donut and the arrows go round the segments, from the last back to the first.
• The amounts hide when the card is under 440px wide, and the middle drops its captions as the donut gets small. With reduced motion, it’s whole from the start and nothing glides.
• Values are sample data.