Charts
Donut chart
Part-to-whole in a ring that sweeps in on a spring. Hover a slice or its legend row and it lifts out on a bouncy spring while the center shows its value.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { DonutChart } from '@vizzele/react';
<DonutChart
title="Traffic sources"
data={[
{ label: 'Search', value: 4200 },
{ label: 'Direct', value: 2600 },
{ label: 'Social', value: 1500 },
{ label: 'Other', value: 700 },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | DonutSlice[] | — | { label, value, color? } — keep it to five; fold the rest into "Other". |
title | string | — | Accessible name. |
size | number | 220 | Diameter in px. |
thickness | number | 22 | Ring thickness in px. |
centerLabel | string | 'Total' | Caption under the center figure. |
legend | boolean | true | Legend with values and shares. |
Accessibility
- The plot is focusable: ←/→ walk the points (Home/End jump) and a polite live region reads each one.
- Every value is also in a visually hidden <table>, so nothing is gated behind hover.
- Identity never relies on color alone: legend for 2+ series, direct labels when they fit.
- The palette is validated for color-vision deficiency and contrast in both themes.