PieChart
A part-to-whole pie / donut - and pie multiples - for the occasional valid share.
A pie or donut with muted greys and at most one emphasised slice, plus a single-share mode with an impact-coloured growth sliver for "pie multiples" layouts. Included for the occasional valid share and to reproduce IBCS pie multiple exhibits.
When to use
Reach for a column or bar chart first - angles and areas are hard to compare. Use a pie only for a single, simple part-to-whole share (or to reproduce an IBCS "pie multiples" layout), never for trends or precise comparison.
checkIbcs flags every pie
checkIbcs is the library's own check against IBCS notation rules - pass it a chart or report
config and it returns rule violations. Its linear-chart-type rule permits only linear charts
(column, bar, line, area, scatter, bubble, waterfall), so a pie trips the linter by design. Prefer
a bar or column unless the pie is truly the point.
Example
import { PieChart } from "ibcs-react";
// Multi-slice (one emphasised slice, muted greys - not a rainbow)
<PieChart
data={[
{ label: "Software", value: 50 },
{ label: "Support", value: 20 },
{ label: "Consulting", value: 30 },
]}
emphasisIndex={0}
donut
showValueLabels
/>
// "Pie multiples" share with a green/red growth sliver
<PieChart share={{ value: 69, total: 100, delta: 18, higherIsBetter: true }} donut size={130} />The second example above is the pie-multiples pattern: one donut per entity, same size and same total, so the comparison happens across panels rather than between slices. Donuts stay legible down to about 120px.
Props
Prop
Type