# DonutChart

> Donut, pie and semi-donut.

Source: https://ui.jcsoftdev.com/docs/components/donut-chart

Donut, pie and semi-donut. Rounded slice corners and a pixel gap between
slices, a centre total that follows the hovered slice, slices that step out
on hover or keyboard focus, optional outside labels on leader lines (with
collision avoidance) and a legend that toggles slices.

## Import

```ts
import { DonutChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/donut-chart`.

## Usage

```tsx
<DonutChart
  title="Ingresos por servicio en octubre"
  data={services}
  valueFormat="currency"
  variant="donut"
  semi={false}
  innerRadius={0.62}
  cornerRadius={6}
  gap={3}
  explode={8}
  startAngle={0}
  outsideLabels={false}
  height={320}
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the drawing. |
| `description` | `string` |  |  |
| `data` * | `readonly DonutDatum[]` |  |  |
| `variant` | `"donut" \| "pie"` | `"donut"` | `pie` fills the centre (no centre label). |
| `semi` | `boolean` | `false` | Half circle opening upwards, like a gauge. |
| `innerRadius` | `number` | `0.62` | Hole size as a fraction of the outer radius (donut only). |
| `cornerRadius` | `number` | `6` | Radius of the rounded slice corners, in pixels. 0 = sharp. |
| `gap` | `number` | `3` | Visible gap between slices, in pixels. |
| `explode` | `number` | `8` | Pixels a hovered or focused slice moves outwards. |
| `startAngle` | `number` | `0` | Where the first slice starts, in degrees from 12 o'clock (full circle only). |
| `monochrome` | `string \| boolean` | `false` | One hue in shades, darkest on the largest slice. `true` uses the accent; a string sets the base color. |
| `fill` | `"pattern" \| "solid" \| "gradient"` | `"solid"` | `gradient` fades each slice towards the hole; `pattern` adds a texture per slice, so color is not the only cue. |
| `drilldown` | `boolean` | `true` | Slices with `children` open on click (or Enter) with a breadcrumb to go back. |
| `rootLabel` | `string` |  | First breadcrumb item; defaults to the chart title. |
| `breadcrumbLabel` | `string` | `"Drill-down path"` | Accessible name of the breadcrumb. |
| `height` | `number \| "fill"` | `300` |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `valueFormat` | `ValueFormat` |  |  |
| `centerLabel` | `string` |  | Caption under the centre value when nothing is hovered. Defaults to the "Total" label. |
| `centerValue` | `string` |  | Replaces the total shown in the centre while nothing is hovered. |
| `outsideLabels` | `boolean \| "name" \| "percent" \| "both"` | `false` | Names / percentages on leader lines around the ring. `true` shows both. |
| `legend` | `boolean \| "top" \| "bottom"` |  |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` | `false` |  |
| `animate` | `boolean` | `true` |  |
| `initialHidden` | `readonly string[]` |  | Ids hidden at first. |
| `onSliceClick` | `((datum: DonutDatum) => void)` |  |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-donutchart--default)
- [Outside Labels](/storybook/?path=/story/charts-donutchart--outside-labels)
- [Outside Percent Only](/storybook/?path=/story/charts-donutchart--outside-percent-only)
- [Semi Donut](/storybook/?path=/story/charts-donutchart--semi-donut)
- [Semi With Outside Labels](/storybook/?path=/story/charts-donutchart--semi-with-outside-labels)
- [Sharp Thin Ring](/storybook/?path=/story/charts-donutchart--sharp-thin-ring)
- [Custom Center](/storybook/?path=/story/charts-donutchart--custom-center)
- [Monochrome](/storybook/?path=/story/charts-donutchart--monochrome)
- [Gradient](/storybook/?path=/story/charts-donutchart--gradient)
- [Textured](/storybook/?path=/story/charts-donutchart--textured)
- [Update](/storybook/?path=/story/charts-donutchart--update)
- [Drilldown](/storybook/?path=/story/charts-donutchart--drilldown)
- [Hidden Slices](/storybook/?path=/story/charts-donutchart--hidden-slices)
- [Loading](/storybook/?path=/story/charts-donutchart--loading)
- [Empty](/storybook/?path=/story/charts-donutchart--empty)
- [Narrow](/storybook/?path=/story/charts-donutchart--narrow)
- [Fill Parent](/storybook/?path=/story/charts-donutchart--fill-parent)
- [Small Ring Long Value](/storybook/?path=/story/charts-donutchart--small-ring-long-value)

## Source

`packages/ui/src/charts/donut-chart/donut-chart.tsx`