React micro donut chart — part-to-whole as a tiny ring — categories, not a gauge. Tiny accessible SVG microchart; RSC-safe static or /interactive.

MicroDonut answers "roughly what is this made of?" at icon size — an honest, capped concession to a ubiquitous demand. For any comparative read, use SegmentedBar: a flat bar beats a donut of the same data at every size we ship. The wedge cap and labeled rollup are non-optional.

MicroDonut

interactive · 5.21 kB · static · 2.84 kB

Install

Import & usereact/micro-donut

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 },];

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — a mix icon beside the printed headline number in a KPI card.
Avoid for — any comparative read (SegmentedBar) — the docs steer there first.

Sizing

Variants

decorative

62% Chrome

Edge cases

a single category — a full annulus, disambiguated by the summary

no data yet

Four homes

Why this default

The hole is mandatory — the donut's angle + arc-length double encoding beats the pie's area read, which is why pie stays unshipped. Never exploded, tilted, or shadowed. A single category renders a full annulus that looks like a 100% ProgressRing — the summary disambiguates.

Accessibility

The accessible name is the full composition (same wording 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.
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.