DonutChart
SVG-based donut chart with configurable segments, hole size, labels, and optional center content.
Default Donut
Standard donut chart with four default segments and center hole.
Center Content
Donut charts with text displayed in the center for KPI indicators.
75%
OK
Hole Size Variants
Different inner hole radius percentages from thin to thick ring.
40
55
70
With Labels
Labeled donut chart for resource allocation breakdown.
UsedFreeReservedOther
Department Split
Custom colors and segments for department budget visualization.
SalesMarketingDevSupport
Progress Indicator
Two-segment donut as a circular progress indicator with percentage.
70%
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
s1 | text | "40" | Segment 1 percentage |
s2 | text | "25" | Segment 2 percentage |
s3 | text | "20" | Segment 3 percentage |
s4 | text | "15" | Segment 4 percentage |
c1 | text | "#c9952c" | Segment 1 color |
c2 | text | "#17a2b8" | Segment 2 color |
c3 | text | "#28a745" | Segment 3 color |
c4 | text | "#6c757d" | Segment 4 color |
size | text | "200" | Chart size in pixels |
hole | text | "55" | Inner hole radius percentage |
labels | text | "" | Comma-separated segment labels |
children | content | - | Content displayed in center of donut |