# Pie & Donut

Pie and donut charts with angle padding, center text and detached slices.

Group: Charts

## Import

```tsx
import { DonutChart, PieChart } from "@indoku/ui"
```

## Examples

### Pie

```tsx
const data = [
  { name: "Chrome", value: 540 },
  { name: "Safari", value: 260 },
  { name: "Firefox", value: 110 },
  { name: "Edge", value: 90 },
]

function PieBasic() {
  return <PieChart data={data} legend />
}
```

### Donut

```tsx
const data = [
  { name: "Chrome", value: 540 },
  { name: "Safari", value: 260 },
  { name: "Firefox", value: 110 },
  { name: "Edge", value: 90 },
]

function DonutBasic() {
  return <DonutChart data={data} legend />
}
```

### Angle padding

`padAngle` leaves a gap between slices.

```tsx
const data = [
  { name: "Chrome", value: 540 },
  { name: "Safari", value: 260 },
  { name: "Firefox", value: 110 },
  { name: "Edge", value: 90 },
]

function PiePadAngle() {
  return <DonutChart data={data} padAngle={6} innerRadiusRatio={0.5} />
}
```

### Radial text

`radialText` prints a label in the hole.

```tsx
const data = [
  { name: "Chrome", value: 540 },
  { name: "Safari", value: 260 },
  { name: "Firefox", value: 110 },
  { name: "Edge", value: 90 },
]

function DonutRadialText() {
  return <DonutChart data={data} radialText={{ label: "1,000", sublabel: "visits" }} legend />
}
```

### Detached segments

Push slices out with `detached`.

```tsx
const data = [
  { name: "Chrome", value: 540 },
  { name: "Safari", value: 260 },
  { name: "Firefox", value: 110 },
  { name: "Edge", value: 90 },
]

function PieDetached() {
  return <PieChart data={data} detached={[0]} legend />
}
```

## Props

### PieChart / DonutChart

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | `PieDatum[]` |  | Slices: name, value, color? |
| `innerRadiusRatio` | `number` |  | 0 = pie; DonutChart defaults to 0.6. |
| `padAngle` | `number` | `0` | Degrees between slices. |
| `detached` | `number[]` |  | Slice indexes pushed outwards. |
| `radialText` | `{ label: string; sublabel?: string }` |  | Text in the center. |

`*` = required. Style props and HTML attributes are accepted too.

## See also

- Bar Chart: https://ui.indoku.org/docs/bar-chart