All components (204)

Donut chart

Data · DonutChart · .amset-donut

What it is and when to use it

The split of a total into a ring: what sales are made of, the space used or orders by status. With the total in the center and a legend with name, value and percentage next to each color.

When to use it

To show how a total is split among a few parts (2 to 6); more parts cannot be told apart.
center to change the big figure (by default, the total) and footerCenter for the small text below ("this month").
tone on a slice to give it its color, from the common vocabulary; without it, the six rotate: accent, success, warning, error, info and neutral.
format to write the values; without it, numbers in the language of the LocaleProvider. Percentages always go in that language ("66.67%").
legend={false} removes the legend and tableVisible also shows the data table in plain sight.

When not to

To compare quantities with each other, when they are not parts of a whole: BarChart.
For the evolution over time: Trend.
For how full something is against a maximum (quota, space): Gauge.

Keyboard: it has none: there is nothing to press.

Accessibility: the ring is an SVG with role="img" and a title with the written summary ("4 parts, total 8830 €. The largest, Online store, …"). The legend is decorative because it repeats the data table, which is always there for the screen reader with the value and percentage of each part. The center is outside the SVG, so the text does not scale with the drawing.

Fine-tuning: CSS variables --amset-donut-*: -dot, -figure, -footer, -gap, -legend, -legend-width, -size. The size moves the side of the drawing (7.5, 10 or 13.75 rem), the center figure and the legend; diameter still rules if it is passed.

What it looks like

Payment split
Part	Value	Percentage
Card	64	64%
Bank transfer	24	24%
Cash on delivery	12	12%

<DonutChart
  label="Payment split"
  slices={[
    { key: 'card', label: 'Card', value: 64 },
    { key: 'transfer', label: 'Bank transfer', value: 24, tone: 'info' },
  ]}
/>

Props

Import it with import { DonutChart } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	What is being distributed. Required: a ring without a title says nothing.
`slices`required	`readonly DonutSlice[]`	—
`center`	`string`	Large text in the center. By default, the total.
`className`	`string`	Merged with the library classes; it does not replace them.
`diameter`	`number`	Diameter of the ring in pixels (160 by default). It is not called `size` because it is not the `sm`/`md`/`lg` of the common vocabulary: it is a measurement.
`footerCenter`	`string`	The small text below the center.
`format`	`(value: number) => string`	—
`legend`	`boolean`	Shows the legend alongside. The table is always there for the reader.
`size`	`"sm" \| "md" \| "lg"`	—
`tableVisible`	`boolean`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-donut-size`	`10rem`
`--amset-donut-gap`	`var(--amset-space-5)`
`--amset-donut-figure`	`var(--amset-text-xl)`
`--amset-donut-footer`	`var(--amset-text-xs)`
`--amset-donut-legend`	`var(--amset-text-sm)`
`--amset-donut-legend-width`	`10rem`
`--amset-donut-dot`	`0.625rem`

How to change it

.amset-donut {
  --amset-donut-size: ...;
  --amset-donut-gap: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: