Dither Donut
betaA donut chart drawn in shimmering dithered cells, with wedges that pop out and sparkle on hover, focus or pin.
- Data
- 1 file
- 1 npm package
- Accessibility notes
- Draws on a canvas
Loading the example…
pnpm dlx @dowel-ui/cli add dither-donutnpm packages installed: class-variance-authority.
import { DitherDonut } from "@/components/ui/dither-donut";Default
Dither Donut Graph
Device Usage Donut
Gallery
Token Colours
Controlled
With Visible Table
Static
<DitherDonut>
| Prop | Type | Default |
|---|---|---|
data (required) | readonly DitherDonutDatum[] | — |
label (required)What the chart shows. Names the image, the legend and the data table. | string | — |
activeIndexThe pinned entry (controlled). | number | null | — |
animateRun the shimmer. Reduced motion stops it regardless. | boolean | true |
cell | number | — |
centerCentre content. Defaults to the active entry, or the total; null hides it. | ReactNode | — |
defaultActiveIndex | number | null | null |
descriptionReplaces the generated summary in the image's accessible name. | string | — |
formatValue | (value: number) => string | formatDitherValue |
labels | DitherDonutLabels | — |
onActiveIndexChange | (index: number | null) => void | — |
showLegend | boolean | true |
showTableShow the data table. It is always present for assistive technology. | boolean | false |
size | "sm" | "md" | "lg" | "md" |
thicknessRing thickness as a fraction of the radius. Default 0.36. | number | 0.36 |
variant | "graph" | "flat" | "graph" |
Plus every attribute of <div> except children.
The plot is role="img" with an aria-label summarising every entry, its share and the total. Legend entries are buttons named with their value and share: focus or hover previews a wedge, and pressing pins it (aria-pressed). The data is always in a table, visually hidden unless showTable is set. The readout is real text. Under reduced motion the shimmer stops and data changes settle in one frame.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes