Donut Chart
Show how categories contribute to a total.
Preview
Import
import { DonutChart } from "@sigil-ui/components";Usage
<DonutChart
segments={[
{ label: "Direct", value: 45 },
{ label: "Organic", value: 30 },
{ label: "Referral", value: 15 },
{ label: "Social", value: 10 },
]}
centerValue="2.4K"
centerLabel="visitors"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
segments | DonutSegment[] | — | — |
width | number | — | — |
height | number | — | — |
thickness | number | 24 | Ring thickness (px). |
centerLabel | string | — | Center text (e.g. total label). |
centerValue | string | — | Center value. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-success | Success |
--s-warning | Warning |
--s-error | Error |
--s-info | Info |
--s-chart-neutral | Chart neutral |
--s-text | Text |
--s-font-mono | Font mono |
--s-text-muted | Text muted |