MicroDonut
MicroDonut shows roughly what a mix is made of as an icon-sized ring, with a capped wedge count.
- encodes
- wedge angle
- precision
- LOW — SegmentedBar for any comparative read
- nodes
- ≤ 5 (4 wedges + Other)
A KPI card prints "62% Chrome" and wants a mix icon beside it. MicroDonut is that icon: a ring at icon size showing roughly what something is made of. For any comparative read, use SegmentedBar instead — a flat bar beats a donut of the same data at every size we ship. The wedge cap and the labeled rollup are non-optional, and so is the hole: a ring encodes angle and arc length together, which is the read a pie's area can't match, and the reason pie stays unshipped. Nothing here is exploded, tilted, or shadowed.
Install
import { MicroDonut } from "@microcharts/react/micro-donut";// mix — real values under “Sample data” below<MicroDonut data={mix} title="Traffic mix" />Sample data
const mix = [ { label: "Chrome", value: 620 }, { label: "Safari", value: 240 }, { label: "Firefox", value: 90 }, { label: "Edge", value: 30 }, { label: "Arc", value: 20 },];Try it
When to use it
Use it for a mix icon beside the printed headline number in a KPI card. For any comparative read use SegmentedBar; these docs steer there first.
Sizing
Variants
Edge cases
A single category fills the ring, and that full annulus looks like a 100% ProgressRing; the summary names the category and its share, which is what tells the two apart. Empty data draws no wedges.
Four homes
Accessibility
The accessible name is the full composition, worded the same as SegmentedBar. decorative marks the chart aria-hidden
for the one sanctioned ornamental use, beside a printed value, and the interactive entry refuses to make a decorative
donut a tab stop.
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { label; value }[] | Parts of the whole. |
| maxWedges | number | Rollup threshold (default 4). |
| decorative | boolean | Redundant ornament beside a printed value → aria-hidden. |
| weight | number | Annulus thickness (shared with ProgressRing). |
| label | "none" | "total" | Center total when the hole has room (default "none"). |
| colors | string[] | Per-wedge colours, cycled; overrides --mc-cat-N. Other stays neutral. |
| size | number | Donut square edge in viewBox units (default 24). |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.