PieChart
Slice shares by category. Channel traffic below is honest sample data, rendered as a static SVG with no tooltips.
Channel traffic
- Direct40
- Referral25
- Search20
- Social15
<PieChart data={channels} />Donut variant
Pass donut to punch the center and print the total (100).
- Direct40
- Referral25
- Search20
- Social15
<PieChart label="Channel traffic" data={channels} donut />Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array<{ label: string; value: number }> | - | Slices in document order; negative values clamp to zero. |
donut | boolean | false | Overlay a surface circle and print the total in the center. |
label | string | "Pie chart" | Chart name; opens the auto-summary. |
size | number | 220 | viewBox edge; the SVG scales to 100%. |
class | string | - | Style passthrough. |
Static honesty
Static SVG, no tooltips. Wedges are computed frontmatter paths (no JS runs in the browser); a single-slice chart draws as a circle. Colors cycle accent, success, info, warning, danger, muted in document order and stay dark-safe via global tokens. An all-zero total renders a border-state circle with a "no data" label instead of dividing by zero. The legend is a real <ul> with swatch, label, and value.
Accessibility
- The chart is an image (
role="img") with an auto-summary label:"{Label}, {n} segments, total {total}", or"{Label}, no data"when the total is zero. - A
<title>repeats the summary and a<desc>describes the reading direction. - Every wedge carries a
<title>with its"{label}: {value}"; every legend entry exists as text.