Pie Chart
A pie chart with percentage labels, colored slices, and auto-generated legend.
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 },
]}
showLabels
showLegend
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
slices | PieSlice[] | — | Pie slices with label, value, and optional color |
width | number | 220 | SVG width in px |
height | number | 220 | SVG height in px |
showLabels | boolean | true | Show percentage labels on slices |
showLegend | boolean | true | Show color legend below the chart |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | First slice color |
--s-success | Second slice color |
--s-warning | Third slice color |
--s-error | Fourth slice color |
--s-info | Fifth slice color |
--s-text-muted | Legend text |