Pie Chart
Compare category shares as segments of a circle.
Preview
Import
import { PieChart } from "@sigil-ui/components";Usage
<PieChart
slices={[
{ label: "Direct", value: 45 },
{ label: "Organic", value: 30 },
{ label: "Referral", value: 15 },
{ label: "Social", value: 10 },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
slices | PieSlice[] | — | — |
width | number | — | — |
height | number | — | — |
showLabels | boolean | true | Show percentage labels on slices. |
showLegend | boolean | true | Show legend below chart. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-chart-series-1 | Chart series 1 |
--s-chart-series-2 | Chart series 2 |
--s-chart-series-3 | Chart series 3 |
--s-chart-series-4 | Chart series 4 |
--s-chart-series-5 | Chart series 5 |
--s-chart-neutral | Chart neutral |
--s-primary-contrast | Primary contrast |
--s-shadow-sm | Shadow sm |
--s-radius-full | Radius full |
--s-text-muted | Text muted |