Edit Pie Chart

Name

Also known as (comma separated)

Brief definition Circular proportion chart.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "highlightSlice", "type": "select", "label": "Highlight slice", "default": "first", "options": [ "first", "second", "third" ] }, { "id": "showLabels", "type": "toggle", "label": "Show percentage labels", "default": true }, { "id": "accent", "type": "color", "label": "First slice colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "sliceCount", "type": "select", "label": "Number of slices", "default": "3", "options": [ "3", "4" ] }, { "id": "showLegend", "type": "toggle", "label": "Show legend", "default": true } ]

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