Donut

Live demo

A ring for one share of a whole: a weekly goal, a course, a storage quota.

Provide value (0 to 100), and optionally label (shown under the value and used as the accessible name), valueText ("4 of 5"), size (default 96) and thickness (default 10).
The arc uses the theme's spark color on the bar track, and grows once on first view. The value sits in the center in the theme's number face.
Inside a hero card it takes the hero's colors.

Do: one ring per group, with the number in it. Don't: pie charts with many slices, rings for values that aren't parts of a whole.

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

React

import { Donut } from 'enma/react';

<Donut value={80} label="Weekly goal" valueText="4 of 5" />

This component needs JavaScript for its behaviour. Outside React, port it with the same classes and props, as described in Other platforms.

Props of DonutProps
Prop	Type	Default	Description
`value` required	number		0 to 100.
`label`	string		What the ring measures, shown in the center under the value and used as the accessible name.
`valueText`	string	the rounded percentage	Text for the value, for example "4 of 5". Default: the rounded percentage.
`size`	number	96	Diameter in px. Default 96.
`thickness`	number	10	Ring thickness in px. Default 10.
`className`	string
`style`	React.CSSProperties