synthetic
PieChart
A pie or donut showing how a few parts make up a whole.
Budget by projectLegend below the pie; four parts at most
Tideline mobile (46%)Harbour rebrand (30%)Depot signage (14%)Other (10%)
Tideline mobile (46%)Harbour rebrand (30%)Depot signage (14%)Other (10%)
Tideline mobile (46%)Harbour rebrand (30%)Depot signage (14%)Other (10%)
Rota export (100%)
In context
Budget cardA donut beside the figures, £158,450 in all
BudgetAll five projects
£158,450Tideline mobile (46%)Harbour rebrand (30%)Depot signage (14%)Other (10%)
On track
Harbour rebrand
£48,200 · Maya Chen
Review
Tideline mobile
£72,900 · Jonas Weber
Late
Crew interviews
£9,400 · Priya Nair
Props
| Prop | Type | Required | Default |
|---|---|---|---|
slices | PieChartSlice[] | Yes | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
size | number | undefined | No | 240 |
innerRadiusRatio | number | undefined | No | 0 |
labelPosition | PieChartLabelPosition | undefined | No | legend |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
data-rebar-* attributes
data-rebar-component="pie-chart" on the root <figure>; parts: slice-group, slice (carries data-rebar-exploded when that slice is popped out), legend, inside-label, outside-label.
Migrating to Ant Design
Not codemod-covered — AntD ships no chart components of its own (it recommends @ant-design/charts, a separate package built on G2Plot); there's no direct 1:1 antd component mapping for a pie chart, so a migration reimplements this chart against whichever charting library the target project already uses.