DonutChart
A donut (or pie) chart for part-to-whole proportions across named slices.
Installation
npx dafink-ui add donut-chartRequires: recharts
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data | DonutSlice[] | - | Array of { label, value, color? } slices. |
| innerRadius | number | 0.65 | Inner radius as a fraction of outer. 0 = pie chart. |
| height | number | 240 | Chart height in px. |
| showLegend | boolean | true | Whether to show the legend. |
| className | string | "" | Extra classes applied to the container. |
Accessibility
DonutChart's SVG root is Tab-focusable, and ArrowLeft/ArrowRight step Recharts' shared tooltip between slices, Enter pins it; the wrapping div carries role="img" and aria-label="Donut chart". The enlarged-slice hover effect, however, is driven by this component's own onMouseEnter/onMouseLeavestate rather than Recharts' keyboard-driven active index, so keyboard users get the stepped tooltip but not the enlarged slice. The legend renders static labels only, not a click-to-toggle control.