# Pie (/docs/charts/pie)
```tsx
import { PieInset, PieSlices, PolarChart } from "@delacour/react-native-charts";
;
```
`PolarChart` reads a value and a label from each row and nothing else; colours are mark props,
cycled when there are more slices than colours. `PieInset` strokes the edge between neighbouring
slices — in the background colour it reads as a gap, in a foreground colour as a border. Angles
are degrees, 0° at 12 o'clock, clockwise.
## Donut [#donut]
```tsx
import { PieLabel, PieSlices, PolarChart, useSystemFont } from "@delacour/react-native-charts";
const font = useSystemFont(undefined, 12);
`${Math.round(slice.fraction * 100)}%`} minSweep={12} />
;
```
`innerRadius` is the hole, in points or as a percentage of the radius. `PieLabel` prints Skia text
on the bisector of every slice at least `minSweep` degrees wide — a label on a two-degree slice
lands on its neighbours. `formatLabel` receives the resolved slice: its `label`, `value`,
`fraction` and angles.
## Gauge [#gauge]
```tsx
```
`circleSweepDegrees` is how much of the circle the slices fill; `startAngle` is where the first
begins. A half circle starting at 9 o'clock is a gauge.
## Selection [#selection]
```tsx
const [selected, setSelected] = useState(null);
;
```
The selection is yours. `onSlicePress` reports the tapped slice's index, or `null` for a tap
outside every slice, and `selectedIndex` is what the marks read: `PieSlices` dims every slice but
that one. The root never changes it, so a wrapper that already keeps selection state keeps one
copy of it.
The tap overlay mounts only with `onSlicePress`. A pie without one takes no touches at all and
scrolls with its parent like a picture.
## A single slice [#a-single-slice]
```tsx
```
`PieSlice` takes `index` or `slice`, the way a cartesian mark takes `yKey` or `points`. On mount
it grows out of the centre: the entrance path is the same slice at radius zero.
## API Reference [#api-reference]
### PolarChart [#polarchart]
void",
description: "Called with the tapped slice's index, or null for a tap outside every slice. Mounts the tap overlay.",
},
children: { type: "ReactNode | ((args: PolarRenderArgs) => ReactNode)", description: "Skia children, or a function of the resolved chart." },
}}
/>
### PieSlices [#pieslices]
ReactNode",
description: "Skia paint children for each slice — a gradient, a shader.",
},
}}
/>
### PieSlice [#pieslice]
### PieLabel [#pielabel]
string", description: "The text for a slice. Defaults to its label." },
minSweep: { type: "number", default: "0", description: "Slices narrower than this, in degrees, get no label." },
opacity: { type: "number" },
children: { type: "ReactNode", description: "Skia paint children — a shader for the text." },
}}
/>
### PieInset [#pieinset]