PieChart

Proportional composition as arc slices in the chart-1..chart-8 token colors, with a percent legend. donut centers the total (or the selected slice while inspecting); pressing a slice dims the others.
Direct
42%
Organic search
28%
Social
18%
Other
12%
iOS
Direct
42%
Organic search
28%
Social
18%
Other
12%
Android
Direct
42%
Organic search
28%
Social
18%
Other
12%
Web
tsx
<PieChart
label="Traffic"
slices={[
{ label: "Direct", value: 42 },
{ label: "Organic search", value: 28 },
{ label: "Social", value: 18 },
{ label: "Other", value: 12 }
]}
/>

Props

Prop
Description
slices
required
StackedSegment[]
The slices, in order; each takes its share of the circle.
label
string
What the pie measures (e.g. "Traffic sources"); leads the accessible name.
donut
boolean
Draw an annular ring with the total and label centered inside.
hideLegend
boolean
Hide the legend (the labelled dots beside percentages).
compact
boolean
Smaller diameter.
selected
number | null
Press-to-inspect: the selected slice index (controlled). Pass null for none.
defaultSelected
number
Press-to-inspect: the initially selected slice (uncontrolled).
onSelect
(index: number | null) => void
Fired when a press selects a slice (or clears it with null).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
For sizing/composition only.

Do & Don’t

Pie

Don’t
Direct
22%
Organic
18%
Social
11%
Referral
9%
Email
8%
Paid
7%
Video
6%
Affiliates
6%
Push
5%
SMS
4%
Podcasts
2%
Misc
2%
A dozen sliver slices cycle the palette and become unreadable; nothing is comparable at a glance.
Do
Direct
42%
Organic search
28%
Social
18%
Other
12%
Keep slices to a handful and fold the tail into an "Other" slice; the legend carries exact shares.
← MetricBreakdown
ProgressRing →