DonutChart
DonutChart is a PieChart with a cutout, so you can
place a total or label in the middle.
Usage
import { DonutChart } from "@sina-design-system/core";
<DonutChart label="Holdings" data={{ labels, datasets }} centerLabel="$48k" />Examples
Center label
Thin ring (cutout 80%) · no center label
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required accessible name. |
data | ChartData | — | The parts to plot (Chart.js shape). |
centerLabel | string | — | Text shown in the cutout. |
Accessibility
Shares the color-blind-safe palette and the role="img" + text-legend accessibility
of PieChart.