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)
- collection
- Core
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
- hover · rove · click…
Hover a wedge (angle lookup) or arrow through them — Other announces its members.
import { MicroDonut } from "@microcharts/react/micro-donut/interactive";// mix — real values under “Sample data” below<MicroDonut data={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 },];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
Chrome carried 62% of this week’s sessions — Safari, Firefox, Edge, and Arc split the rest.
| Desktop | Chrome 62% | |
| Mobile | Safari 54% |
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.
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, press Escape, or
press outside the chart. 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.