Pie & Donut
Pie or donut with rounded corners, pad angles, partial sweeps (semicircle), glowing segments, outside or percent labels and centre text. Drag around the ring to select; the active slice pops out.
Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.
Installation
npx expo install expo-charts react-native-svgUsage
Import the component and pass your data. Width defaults to the parent, so it adapts to phones, tablets and rotation.
<PieSeriesChart data={browsers} nameKey="browser" valueKey="visitors" innerRadius={0.6} cornerRadius={8} padAngle={3} glow={["chrome"]} centerLabel="Visitors"/>Props
| Prop | Type | Default |
|---|---|---|
| data Rows like [{ browser: "chrome", visitors: 275 }]. | Datum[] | — |
| nameKey / valueKey Which keys hold the label and the number. | string | "name" / "value" |
| config Labels / colours keyed by name. | ChartConfig | — |
| size Diameter. | number | 260 |
| showLegend Legend under the chart. | boolean | false |
| legendVariant Legend marker style. | LegendVariant | "rounded-square" |
| glow Glow every segment or only named ones. | boolean | string[] | false |
| isLoading Skeleton state. | boolean | false |
| onSelect Selection callback. | (index, datum) => void | — |
| innerRadius 0 = pie, 0.6 = donut. | number (0–0.95) | 0.6 |
| cornerRadius Rounded slice corners. | number | 0 |
| padAngle Gap between slices. | number (deg) | 0 |
| startAngle / endAngle -90 / 90 makes a semicircle. | number (deg) | 0 / 360 |
| activeIndex / defaultActiveIndex Controlled / initial selection. | number | null | null |
| activeOffset How far the active slice pops out. | number | 8 |
| labels Slice labels. | "none" | "inside" | "outside" | "percent" | "none" |
| centerValue / centerLabel Donut centre text (null hides). | string | total / "Total" |
Did you like the content?