PieChart
How a whole splits into a few parts, as a donut or a solid pie, like payments by method.
Master
Hover or use the arrow keys for each slice. Switch size and legend position; turn the title, donut, total, legend and animate on and off.
| Value | Share | |
|---|---|---|
| Card | $182,400 | 55% |
| ACH | $96,300 | 29% |
| Wire | $41,800 | 13% |
| Check | $12,600 | 4% |
Usage
Use PieChart for the share of a total across a handful of parts. It is one component: pass data, one entry per slice. Slices go largest first from the top, clockwise; past maxSlices the rest merge into one grey Other slice. donut (the default) leaves a hole with the total in it; turn it off for a solid pie. The legend lists each part with its percent, beside the chart or under it. alignment center keeps the pie and a legend beside it together in the middle of a wide box. Hover or use the arrow keys for a tooltip with the value. animate sweeps the slices in. ChartIntent: green | olive | cyan | orange | pink | gray | purple | yellow | red | mint (the kit category colors). title and subtitle write a heading over the chart; showHeader turns it off when the Card around it already says the same. See contracts/piechart.json for the full contract. A legend beside the chart drops under it when the chart's own box is narrower than 360px.
Do's
- The share of a total across 2 to 6 parts: payments by method, revenue by region.
Don'ts
- Do not use it for many parts or values over time. Use BarChart or LineChart.
- Do not switch the legend to bottom only to centre the chart. Use alignment center.
- Do not use it to compare parts that don't add up to a whole.
- Do not draw charts with loose SVG or a chart library. Use the kit charts.
- Do not use raw hex; pick an intent.
<PieChart
label="Payments by method"
title="Payments by method"
subtitle="This period"
data={payments}
size="md"
legendPosition="end"
alignment="start"
format="currency"
/>