Pie Chart
Circular proportion chart.
-
- Category A — 40%
- Category B — 35%
- Category C — 25%
-
- Category A — 35%
- Category B — 25%
- Category C — 25%
- Category D — 15%
Pie chart data, 3 categories
| Category | Share |
|---|
| Category A | 40% |
| Category B | 35% |
| Category C | 25% |
Pie chart data, 4 categories
| Category | Share |
|---|
| Category A | 35% |
| Category B | 25% |
| Category C | 25% |
| Category D | 15% |
html
<div class="pie-chart pie-chart--3 pie-chart--hl-first pie-chart--legend" style="--accent:#A8E6C1;">
<svg class="pie-chart__svg" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Pie chart with 3 categories, first slice highlighted">
<g class="pie-chart__group pie-chart__group--3">
<path class="pc-wedge pc-wedge-1" d="M60,60 L60,10 A50,50 0 0 1 89.39,100.45 Z"></path>
<path class="pc-wedge pc-wedge-2" d="M60,60 L89.39,100.45 A50,50 0 0 1 10,60 Z"></path>
<path class="pc-wedge pc-wedge-3" d="M60,60 L10,60 A50,50 0 0 1 60,10 Z"></path>
<text class="pc-wedge-label pc-wedge-label-1" x="88.5" y="50.7">40%</text>
<text class="pc-wedge-label pc-wedge-label-2" x="46.4" y="86.7">35%</text>
<text class="pc-wedge-label pc-wedge-label-3" x="38.8" y="38.8">25%</text>
</g>
<g class="pie-chart__group pie-chart__group--4">
<path class="pc-wedge pc-wedge-1" d="M60,60 L60,10 A50,50 0 0 1 100.45,89.4 Z"></path>
<path class="pc-wedge pc-wedge-2" d="M60,60 L100.45,89.4 A50,50 0 0 1 30.6,100.45 Z"></path>
<path class="pc-wedge pc-wedge-3" d="M60,60 L30.6,100.45 A50,50 0 0 1 19.55,30.6 Z"></path>
<path class="pc-wedge pc-wedge-4" d="M60,60 L19.55,30.6 A50,50 0 0 1 60,10 Z"></path>
<text class="pc-wedge-label pc-wedge-label-1" x="86.7" y="46.4">35%</text>
<text class="pc-wedge-label pc-wedge-label-2" x="64.7" y="89.6">25%</text>
<text class="pc-wedge-label pc-wedge-label-3" x="30.4" y="64.7">25%</text>
<text class="pc-wedge-label pc-wedge-label-4" x="46.4" y="33.3">15%</text>
</g>
</svg>
<ul class="pie-chart__legend">
<li class="pie-chart__legend-list--3">
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-1" aria-hidden="true"></span>Category A — 40%</li>
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-2" aria-hidden="true"></span>Category B — 35%</li>
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-3" aria-hidden="true"></span>Category C — 25%</li>
</li>
<li class="pie-chart__legend-list--4">
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-1" aria-hidden="true"></span>Category A — 35%</li>
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-2" aria-hidden="true"></span>Category B — 25%</li>
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-3" aria-hidden="true"></span>Category C — 25%</li>
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-4" aria-hidden="true"></span>Category D — 15%</li>
</li>
</ul>
<div class="pie-chart__srtable-wrap pie-chart__srtable-wrap--3">
<table class="pie-chart__srtable">
<caption>Pie chart data, 3 categories</caption>
<thead><tr><th scope="col">Category</th><th scope="col">Share</th></tr></thead>
<tbody>
<tr><td>Category A</td><td>40%</td></tr>
<tr><td>Category B</td><td>35%</td></tr>
<tr><td>Category C</td><td>25%</td></tr>
</tbody>
</table></div>
<div class="pie-chart__srtable-wrap pie-chart__srtable-wrap--4">
<table class="pie-chart__srtable">
<caption>Pie chart data, 4 categories</caption>
<thead><tr><th scope="col">Category</th><th scope="col">Share</th></tr></thead>
<tbody>
<tr><td>Category A</td><td>35%</td></tr>
<tr><td>Category B</td><td>25%</td></tr>
<tr><td>Category C</td><td>25%</td></tr>
<tr><td>Category D</td><td>15%</td></tr>
</tbody>
</table></div>
</div>
<style>
.pie-chart { max-width: 360px; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px; box-sizing: border-box; }
.pie-chart__group { display: none; }
.pie-chart--3 .pie-chart__group--3 { display: block; }
.pie-chart--4 .pie-chart__group--4 { display: block; }
.pie-chart__svg { width: 160px; height: 160px; display: block; margin: 0 auto; }
.pie-chart .pc-wedge { stroke: #FAF7F2; stroke-width: 2; }
.pie-chart .pc-wedge-1 { fill: var(--accent); }
.pie-chart .pc-wedge-2 { fill: #F5C2E0; }
.pie-chart .pc-wedge-3 { fill: #BFD9F2; }
.pie-chart .pc-wedge-4 { fill: #D9C8F0; }
.pie-chart .pc-wedge-label { font-size: 8px; fill: #241430; text-anchor: middle; font-weight: 600; }
.pie-chart--hl-first .pc-wedge-1 { stroke: #241430; stroke-width: 3; }
.pie-chart--hl-second .pc-wedge-2 { stroke: #241430; stroke-width: 3; }
.pie-chart--hl-third .pc-wedge-3 { stroke: #241430; stroke-width: 3; }
.pie-chart--hl-first .pc-wedge-label-1 { font-weight: 800; text-decoration: underline; }
.pie-chart--hl-second .pc-wedge-label-2 { font-weight: 800; text-decoration: underline; }
.pie-chart--hl-third .pc-wedge-label-3 { font-weight: 800; text-decoration: underline; }
.pie-chart__legend { list-style: none; margin: 12px 0 0; padding: 0; display: none; font-size: 12px; }
.pie-chart--legend .pie-chart__legend { display: block; }
.pie-chart__legend-list--3, .pie-chart__legend-list--4 { display: none; }
.pie-chart--3 .pie-chart__legend-list--3 { display: block; }
.pie-chart--4 .pie-chart__legend-list--4 { display: block; }
.pie-chart__item { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.pie-chart__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.pie-chart__swatch-1 { background: var(--accent); }
.pie-chart__swatch-2 { background: #F5C2E0; }
.pie-chart__swatch-3 { background: #BFD9F2; }
.pie-chart__swatch-4 { background: #D9C8F0; }
.pie-chart__srtable { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pie-chart__srtable-wrap { display: none; }
.pie-chart--3 .pie-chart__srtable-wrap--3 { display: block; }
.pie-chart--4 .pie-chart__srtable-wrap--4 { display: block; }
</style>
tailwind
<div class="pie-chart-tw pie-chart-tw--3 pie-chart-tw--hl-first pie-chart-tw--legend" style="--accent:#A8E6C1;">
<svg class="pie-chart-tw__svg" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Pie chart with 3 categories, first slice highlighted">
<g class="pie-chart-tw__group pie-chart-tw__group--3">
<path class="pc-wedge pc-wedge-1" d="M60,60 L60,10 A50,50 0 0 1 89.39,100.45 Z"></path>
<path class="pc-wedge pc-wedge-2" d="M60,60 L89.39,100.45 A50,50 0 0 1 10,60 Z"></path>
<path class="pc-wedge pc-wedge-3" d="M60,60 L10,60 A50,50 0 0 1 60,10 Z"></path>
<text class="pc-wedge-label pc-wedge-label-1" x="88.5" y="50.7">40%</text>
<text class="pc-wedge-label pc-wedge-label-2" x="46.4" y="86.7">35%</text>
<text class="pc-wedge-label pc-wedge-label-3" x="38.8" y="38.8">25%</text>
</g>
<g class="pie-chart-tw__group pie-chart-tw__group--4">
<path class="pc-wedge pc-wedge-1" d="M60,60 L60,10 A50,50 0 0 1 100.45,89.4 Z"></path>
<path class="pc-wedge pc-wedge-2" d="M60,60 L100.45,89.4 A50,50 0 0 1 30.6,100.45 Z"></path>
<path class="pc-wedge pc-wedge-3" d="M60,60 L30.6,100.45 A50,50 0 0 1 19.55,30.6 Z"></path>
<path class="pc-wedge pc-wedge-4" d="M60,60 L19.55,30.6 A50,50 0 0 1 60,10 Z"></path>
<text class="pc-wedge-label pc-wedge-label-1" x="86.7" y="46.4">35%</text>
<text class="pc-wedge-label pc-wedge-label-2" x="64.7" y="89.6">25%</text>
<text class="pc-wedge-label pc-wedge-label-3" x="30.4" y="64.7">25%</text>
<text class="pc-wedge-label pc-wedge-label-4" x="46.4" y="33.3">15%</text>
</g>
</svg>
<ul class="pie-chart-tw__legend">
<li class="pie-chart-tw__legend-list--3">
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-1" aria-hidden="true"></span>Category A — 40%</li>
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-2" aria-hidden="true"></span>Category B — 35%</li>
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-3" aria-hidden="true"></span>Category C — 25%</li>
</li>
<li class="pie-chart-tw__legend-list--4">
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-1" aria-hidden="true"></span>Category A — 35%</li>
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-2" aria-hidden="true"></span>Category B — 25%</li>
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-3" aria-hidden="true"></span>Category C — 25%</li>
<li class="pc-legend__item"><span class="pc-legend__swatch pc-legend__swatch-4" aria-hidden="true"></span>Category D — 15%</li>
</li>
</ul>
<div class="pie-chart-tw__srtable-wrap pie-chart-tw__srtable-wrap--3">
<table class="pie-chart-tw__srtable">
<caption>Pie chart data, 3 categories</caption>
<thead><tr><th scope="col">Category</th><th scope="col">Share</th></tr></thead>
<tbody>
<tr><td>Category A</td><td>40%</td></tr>
<tr><td>Category B</td><td>35%</td></tr>
<tr><td>Category C</td><td>25%</td></tr>
</tbody>
</table></div>
<div class="pie-chart-tw__srtable-wrap pie-chart-tw__srtable-wrap--4">
<table class="pie-chart-tw__srtable">
<caption>Pie chart data, 4 categories</caption>
<thead><tr><th scope="col">Category</th><th scope="col">Share</th></tr></thead>
<tbody>
<tr><td>Category A</td><td>35%</td></tr>
<tr><td>Category B</td><td>25%</td></tr>
<tr><td>Category C</td><td>25%</td></tr>
<tr><td>Category D</td><td>15%</td></tr>
</tbody>
</table></div>
</div>
<style>
.pie-chart-tw { max-width: 360px; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px; box-sizing: border-box; }
.pie-chart-tw__group { display: none; }
.pie-chart-tw--3 .pie-chart-tw__group--3 { display: block; }
.pie-chart-tw--4 .pie-chart-tw__group--4 { display: block; }
.pie-chart-tw__svg { width: 160px; height: 160px; display: block; margin: 0 auto; }
.pie-chart-tw .pc-wedge { stroke: #FAF7F2; stroke-width: 2; }
.pie-chart-tw .pc-wedge-1 { fill: var(--accent); }
.pie-chart-tw .pc-wedge-2 { fill: #F5C2E0; }
.pie-chart-tw .pc-wedge-3 { fill: #BFD9F2; }
.pie-chart-tw .pc-wedge-4 { fill: #D9C8F0; }
.pie-chart-tw .pc-wedge-label { font-size: 8px; fill: #241430; text-anchor: middle; font-weight: 600; }
.pie-chart-tw--hl-first .pc-wedge-1 { stroke: #241430; stroke-width: 3; }
.pie-chart-tw--hl-second .pc-wedge-2 { stroke: #241430; stroke-width: 3; }
.pie-chart-tw--hl-third .pc-wedge-3 { stroke: #241430; stroke-width: 3; }
.pie-chart-tw--hl-first .pc-wedge-label-1 { font-weight: 800; text-decoration: underline; }
.pie-chart-tw--hl-second .pc-wedge-label-2 { font-weight: 800; text-decoration: underline; }
.pie-chart-tw--hl-third .pc-wedge-label-3 { font-weight: 800; text-decoration: underline; }
.pie-chart-tw__legend { list-style: none; margin: 12px 0 0; padding: 0; display: none; font-size: 12px; }
.pie-chart-tw--legend .pie-chart-tw__legend { display: block; }
.pie-chart-tw__legend-list--3, .pie-chart-tw__legend-list--4 { display: none; }
.pie-chart-tw--3 .pie-chart-tw__legend-list--3 { display: block; }
.pie-chart-tw--4 .pie-chart-tw__legend-list--4 { display: block; }
.pie-chart-tw__item { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.pie-chart-tw__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.pie-chart-tw__swatch-1 { background: var(--accent); }
.pie-chart-tw__swatch-2 { background: #F5C2E0; }
.pie-chart-tw__swatch-3 { background: #BFD9F2; }
.pie-chart-tw__swatch-4 { background: #D9C8F0; }
.pie-chart-tw__srtable { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pie-chart-tw__srtable-wrap { display: none; }
.pie-chart-tw--3 .pie-chart-tw__srtable-wrap--3 { display: block; }
.pie-chart-tw--4 .pie-chart-tw__srtable-wrap--4 { display: block; }
</style>
react
export function PieChart({
highlightSlice = "first",
showLabels = true,
accent = "#A8E6C1",
sliceCount = "3",
showLegend = true,
}) {
const data3 = [
{ label: "Category A", pct: 40, path: "M60,60 L60,10 A50,50 0 0 1 89.39,100.45 Z", lx: 88.5, ly: 50.7, fill: accent },
{ label: "Category B", pct: 35, path: "M60,60 L89.39,100.45 A50,50 0 0 1 10,60 Z", lx: 46.4, ly: 86.7, fill: "#F5C2E0" },
{ label: "Category C", pct: 25, path: "M60,60 L10,60 A50,50 0 0 1 60,10 Z", lx: 38.8, ly: 38.8, fill: "#BFD9F2" },
];
const data4 = [
{ label: "Category A", pct: 35, path: "M60,60 L60,10 A50,50 0 0 1 100.45,89.4 Z", lx: 86.7, ly: 46.4, fill: accent },
{ label: "Category B", pct: 25, path: "M60,60 L100.45,89.4 A50,50 0 0 1 30.6,100.45 Z", lx: 64.7, ly: 89.6, fill: "#F5C2E0" },
{ label: "Category C", pct: 25, path: "M60,60 L30.6,100.45 A50,50 0 0 1 19.55,30.6 Z", lx: 30.4, ly: 64.7, fill: "#BFD9F2" },
{ label: "Category D", pct: 15, path: "M60,60 L19.55,30.6 A50,50 0 0 1 60,10 Z", lx: 46.4, ly: 33.3, fill: "#D9C8F0" },
];
const data = sliceCount === "4" ? data4 : data3;
const highlightIndex = { first: 0, second: 1, third: 2 }[highlightSlice] ?? 0;
return (
<div style={{ maxWidth: 360, padding: 14, font: "12px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", boxSizing: "border-box" }}>
<svg viewBox="0 0 120 120" style={{ width: 160, height: 160, display: "block", margin: "0 auto" }}
role="img" aria-label={`Pie chart with ${sliceCount} categories, ${highlightSlice} slice highlighted`}>
{data.map((d, i) => (
<path key={i} d={d.path} fill={d.fill} stroke={i === highlightIndex ? "#241430" : "#FAF7F2"} strokeWidth={i === highlightIndex ? 3 : 2} />
))}
{showLabels && data.map((d, i) => (
<text key={i} x={d.lx} y={d.ly} fontSize={8} textAnchor="middle"
fontWeight={i === highlightIndex ? 800 : 600}
textDecoration={i === highlightIndex ? "underline" : "none"} fill="#241430">{d.pct}%</text>
))}
</svg>
{showLegend && (
<ul style={{ listStyle: "none", margin: "12px 0 0", padding: 0, fontSize: 12 }}>
{data.map((d, i) => (
<li key={i} style={{ display: "flex", alignItems: "center", gap: 8, padding: "3px 0" }}>
<span aria-hidden="true" style={{ display: "inline-block", width: 10, height: 10, borderRadius: 2, background: d.fill, flex: "none" }} />
{d.label} — {d.pct}%
</li>
))}
</ul>
)}
</div>
);
}