Pie chart
Part-to-whole wedges or a donut ring.
Use pie charts for part-to-whole shares. One <DunePieChart.Pie /> defines value and name keys. Colors follow config keys that match each row's nameKey.
PieShare as pixel wedges.
Examples
Donut
Set innerRadius on <DunePieChart.Pie /> (number or percent string such as "55%").
DonutPixel donut via innerRadius.
Loading
Set loading on the root to show a pixel skeleton until data is ready.
Loading…
Parts
| Part | Role |
|---|---|
DunePieChart | Root: data, config, loading |
DunePieChart.Tooltip | Hover tooltip |
DunePieChart.Legend | Slice legend |
DunePieChart.Pie | Geometry: dataKey, nameKey, radii, labels |
Props
Root
| Prop | Type | Default | Notes |
|---|---|---|---|
data | Record<string, unknown>[] | required | One row per slice |
config | Record<string, DuneSeriesConfig> | - | Keys match nameKey values |
loading | boolean | false | Pixel skeleton |
emptyMessage | string | - | Empty-state copy |
chartProps | object | - | Extra Recharts PieChart props |
className | string | - | Wrapper class |
Pie
| Prop | Type | Notes |
|---|---|---|
dataKey | string | Numeric value field |
nameKey | string | Slice id field (matches config keys) |
innerRadius | number | string | Donut hole size |
outerRadius | number | string | Outer edge |
paddingAngle | number | Gap between slices |
label | boolean | function | Slice labels |
isAnimationActive | boolean | Slice animation |
Tips
- Keep slice ids stable and match them in
configfor labels and colors. - Prefer a donut when you need center space for a total or short label (add that UI yourself).
- Pie does not use root
fill/pixel. Slice styling follows Recharts plus theme colors.