# PieChart

> A donut without the hole: same slices, rounded corners, gaps, explode on hover, outside labels and legend toggling (see `DonutChart`).

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

A donut without the hole: same slices, rounded corners, gaps, explode on
hover, outside labels and legend toggling (see `DonutChart`).

## Import

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

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

## Usage

```tsx
<PieChart
  title="Ventas por medio de pago"
  data={payments}
  valueFormat="currency"
  semi={false}
  cornerRadius={8}
  gap={3}
  explode={10}
  outsideLabels={false}
  height={320}
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` * | `readonly DonutDatum[]` |  |  |
| `legend` | `boolean \| "top" \| "bottom"` |  |  |
| `title` * | `string` |  | Accessible name of the drawing. |
| `animate` | `boolean` |  |  |
| `className` | `string` |  |  |
| `fill` | `"pattern" \| "solid" \| "gradient"` |  | `gradient` fades each slice towards the hole; `pattern` adds a texture per slice, so color is not the only cue. |
| `tooltip` | `boolean` |  |  |
| `description` | `string` |  |  |
| `height` | `number \| "fill"` |  |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `valueFormat` | `ValueFormat` |  |  |
| `loading` | `boolean` |  |  |
| `initialHidden` | `readonly string[]` |  | Ids hidden at first. |
| `labels` | `Partial<ChartLabels>` |  |  |
| `explode` | `number` |  | Pixels a hovered or focused slice moves outwards. |
| `semi` | `boolean` |  | Half circle opening upwards, like a gauge. |
| `gap` | `number` |  | Visible gap between slices, in pixels. |
| `cornerRadius` | `number` | `8` | Radius of the rounded slice corners, in pixels. 0 = sharp. |
| `startAngle` | `number` |  | Where the first slice starts, in degrees from 12 o'clock (full circle only). |
| `monochrome` | `string \| boolean` |  | One hue in shades, darkest on the largest slice. `true` uses the accent; a string sets the base color. |
| `drilldown` | `boolean` |  | 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` |  | Accessible name of the breadcrumb. |
| `outsideLabels` | `boolean \| "name" \| "percent" \| "both"` |  | Names / percentages on leader lines around the ring. `true` shows both. |
| `onSliceClick` | `((datum: DonutDatum) => void)` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-piechart--default)
- [Outside Labels](/storybook/?path=/story/charts-piechart--outside-labels)
- [Semi Pie](/storybook/?path=/story/charts-piechart--semi-pie)
- [Sharp No Gap](/storybook/?path=/story/charts-piechart--sharp-no-gap)
- [Monochrome](/storybook/?path=/story/charts-piechart--monochrome)
- [Loading](/storybook/?path=/story/charts-piechart--loading)
- [Empty](/storybook/?path=/story/charts-piechart--empty)
- [Narrow](/storybook/?path=/story/charts-piechart--narrow)

## Source

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