# DonutChart

Shares of one total as a ring, with the total in the centre and every share printed in the legend.

- **Use it for**: A few shares of one total, such as spend by model.
- **Not for**: More than five or six parts, or values that do not add up to a whole. Try [BarList](https://unseenui.com/components/bar-list/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { DonutChart } from '@stackunseen/ui';
import { BarList, Card } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<DonutChart label="Spend by model" data={spend} value="$1,284" caption="this month" />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `caption` | `ReactNode` | Under the centre figure: "spend this month". |
| `data` (required) | `readonly DonutSlice[]` | Slices in the order to draw them, clockwise from the top. |
| `label` (required) | `string` | Names the figure for assistive technology and the hidden table. |
| `legend` | `boolean` | Show the legend with each slice's share. |
| `unit` | `string` | Unit for the hidden table, such as "USD". |
| `value` | `ReactNode` | The centre figure, formatted by your app: "$1,284". |

## Keyboard

Inert content; the hidden table is read in order.

## Works with

[Card](https://unseenui.com/components/card/), [Table](https://unseenui.com/components/table/), [Tag](https://unseenui.com/components/tag/), [DiffStat](https://unseenui.com/components/diff-stat/), [ElapsedTime](https://unseenui.com/components/elapsed-time/), [Numeric](https://unseenui.com/components/numeric/), [Kbd](https://unseenui.com/components/kbd/), [DotRing](https://unseenui.com/components/dot-ring/), [DotBars](https://unseenui.com/components/dot-bars/), [WeekStrip](https://unseenui.com/components/week-strip/), [HeatKeys](https://unseenui.com/components/heat-keys/), [Sparkline](https://unseenui.com/components/sparkline/)

Page: https://unseenui.com/components/donut-chart/