# Pie and donut

> Shares of a whole, with the total in the middle and small slices folded into Other.

Source: https://82chart.com/en/docs/pie-donut/

`type: 'pie'` and `'donut'` use `labels` and the first series. The legend sits on the right; clicking an item takes that slice out and recomputes the rest. The donut hole shows the total (change it with `donutLabel`, or `false` to hide it).

```js
createChart('#chart', {
  type: 'donut',
  title: 'Payment methods',
  prefix: '$',
  data: {
    labels: ['Card', 'Wallet', 'Bank transfer', 'Carrier billing', 'Other'],
    series: [{ name: 'Amount', data: [48200, 31500, 9800, 4100, 600] }],
  },
});
```

| Option | Default | What it does |
| --- | --- | --- |
| `donutHole` | 0.62 | Hole size as a share of the radius (0–1) |
| `donutLabel` | the total | Text in the hole; `false` hides it |
| `otherThreshold` | 0.02 | Slices under this share (2%) fold into "Other"; 0 keeps every slice |
| `startAngle` | 0 | Start angle in degrees (0 = 12 o'clock) |
| `legend` | 'right' | `'top' \| 'bottom' \| 'right' \| false` |
| `pieLabels` | 'inside' | `'inside' \| 'outside' \| 'auto'`: outside labels with leader lines |

## Outside labels with leader lines (pieLabels)

By default (`'inside'`) the percent is written inside slices that have room. `pieLabels: 'outside'` writes each slice's name and percent beside the pie with a leader line. Labels on each side are stacked top to bottom at least a line apart, so crowded small slices never overlap; when a side runs out of lines the smallest slices lose their label (the legend, tooltip and table still name them). `'auto'` keeps the labels that fit inside and moves only the rest out. Label text uses the body text color (`--c82-ink-2`).

```js
createChart('#chart', {
  type: 'pie',
  title: 'Population by province',
  pieLabels: 'auto',
  otherThreshold: 0,
  legend: false,
  data: {
    labels: ['Gyeonggi', 'Seoul', 'Busan', 'S. Gyeongsang', 'Incheon', 'N. Gyeongsang', 'Daegu', 'S. Chungcheong', 'S. Jeolla'],
    series: [{ name: 'Population (10k)', data: [1360, 940, 330, 325, 300, 255, 237, 213, 180] }],
  },
});
```

> Past six slices a bar chart reads more accurately: people compare lengths better than angles.