<Donut
segments={[
{ label: "Compute", value: 45 },
{ label: "Database", value: 25 },
{ label: "Cache", value: 18 },
{ label: "Other", value: 12 },
]}
centerLabel="cores" centerValue="847"
/>Donut
src/charts/Donut.tsx
Import
import { Donut } from "@ossrandom/design-system/charts";Peer dependencies
None — pure SVG / canvas2d render path.
Example
API
extends BaseProps
| Prop | Type |
|---|---|
segments required |
readonly DonutSegment[] |
size |
number |
thickness |
number |
centerLabel |
ReactNode |
centerValue |
ReactNode |
showLegend |
boolean |
onSegmentClick |
(segment: DonutSegment, index: number) => void; |