PieChart

Chart
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.
src/charts/pie-chart
View in Charts

Playground

Every control sets a real prop of PieChartProps. The JSX below updates as you go.
Direct · 42%
Organic search · 28%
Social · 18%
Other · 12%
Props
donut
boolean
hideLegend
boolean
compact
boolean
label
string
JSX · PieChartProps
<PieChart donut label="Installs" />

Variants

1 examples from src/charts/pie-chart/pie-chart.md, each rendered live from its own JSX.
Direct · 42%
Organic search · 28%
Social · 18%
Other · 12%
Donut
<PieChart
donut
label="Traffic"
slices={[
{ label: "Direct", value: 42 },
{ label: "Organic search", value: 28 },
{ label: "Social", value: 18 },
{ label: "Other", value: 12 }
]}
/>

Anatomy

Direct · 42%
Organic search · 28%
Social · 18%
Other · 12%
1
Chart frame
2
Slice
3
Center value
4
Legend
Dimmed parts appear only in some states or variants.

Props

11 props on PieChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
11 props
slices *
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
false
Draw an annular ring with the total and label centered inside.
hideLegend
boolean
false
Hide the legend (the labelled dots beside percentages).
detailed
boolean
false
Spread names and shares into a value column beside a compact composition disc.
compact
boolean
false
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
image
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Direct · 42%
Organic search · 28%
Social · 18%
Other · 12%
Web
control 10 · field 10 · card 16 · Instrument Sans
Direct · 42%
Organic search · 28%
Social · 18%
Other · 12%
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Direct · 42%
Organic search · 28%
Social · 18%
Other · 12%
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<PieChart
label="Traffic"
slices={[
{ label: "Direct", value: 42 },
{ label: "Organic search", value: 28 },
{ label: "Social", value: 18 },
{ label: "Other", value: 12 }
]}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--c2
--c3
--c4
--fd
--ft
--ln
--sf
--sh-sm
--tx
--tx2
--tx3

Related components