# Pie Chart

Sectors of a circle, for the parts of a whole.

Source: [pie-chart.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/pie-chart.tsx)

```tsx
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartLegend, ChartTooltip, type ChartConfig } from "@/components/ui/chart";
import { PieChart, PieChartLabel } from "@/components/ui/pie-chart";

const data = [
  { type: "documents", size: 3.4 },
  { type: "images", size: 2.6 },
  { type: "video", size: 2.1 },
  { type: "other", size: 1.1 },
];

const config = {
  documents: { label: "Documents" },
  images: { label: "Images" },
  video: { label: "Video" },
  other: { label: "Other" },
} satisfies ChartConfig;

export default function PieChartStorage() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardTitle>Storage</CardTitle>
        <CardDescription>9.2 of 10 GB used</CardDescription>
      </CardHeader>
      <CardContent>
        <PieChart
          data={data}
          config={config}
          dataKey="size"
          nameKey="type"
          innerRadius="62%"
          className="aspect-square"
        >
          <ChartTooltip hideLabel valueFormatter={(size) => `${size} GB`} />
          <ChartLegend align="center" verticalAlign="bottom" />
          <PieChartLabel value="9.2 GB" label="Used" />
        </PieChart>
      </CardContent>
    </Card>
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/pie-chart
```

## Usage

```tsx
import { ChartTooltip, type ChartConfig } from "@/components/ui/chart";
import { PieChart } from "@/components/ui/pie-chart";

const data = [
  { browser: "chrome", visitors: 275 },
  { browser: "safari", visitors: 200 },
  { browser: "firefox", visitors: 187 },
];

const config = {
  chrome: { label: "Chrome" },
  safari: { label: "Safari" },
  firefox: { label: "Firefox" },
} satisfies ChartConfig;

export function BrowsersChart() {
  return (
    <PieChart data={data} config={config} dataKey="visitors" nameKey="browser">
      <ChartTooltip hideLabel />
    </PieChart>
  );
}
```

Each row is a sector, labeled and colored by its `nameKey` entry in the config. The tooltip and
legend come from [Chart](https://ui.jarv.is/components/chart.md).

## Composition

- `PieChart`
  - [`ChartTooltip`](https://ui.jarv.is/components/chart.md)
  - [`ChartLegend`](https://ui.jarv.is/components/chart.md)
  - `PieChartLabel`

## Examples

### Pie

Without an `innerRadius`, the chart is a full pie.

```tsx
import { ChartLegend, ChartTooltip, type ChartConfig } from "@/components/ui/chart";
import { PieChart } from "@/components/ui/pie-chart";

const data = [
  { browser: "chrome", visitors: 275 },
  { browser: "safari", visitors: 200 },
  { browser: "firefox", visitors: 187 },
  { browser: "edge", visitors: 173 },
  { browser: "other", visitors: 90 },
];

const config = {
  chrome: { label: "Chrome" },
  safari: { label: "Safari" },
  firefox: { label: "Firefox" },
  edge: { label: "Edge" },
  other: { label: "Other" },
} satisfies ChartConfig;

export default function PieChartBasic() {
  return (
    <PieChart
      data={data}
      config={config}
      dataKey="visitors"
      nameKey="browser"
      className="aspect-square max-w-xs"
    >
      <ChartTooltip hideLabel />
      <ChartLegend align="center" verticalAlign="bottom" />
    </PieChart>
  );
}
```

### Separated

`paddingAngle` and `cornerRadius` separate the sectors. `PieChartLabel` puts a figure in the
middle.

```tsx
import { ChartTooltip, type ChartConfig } from "@/components/ui/chart";
import { PieChart, PieChartLabel } from "@/components/ui/pie-chart";

const data = [
  { status: "passed", tests: 1284 },
  { status: "skipped", tests: 96 },
  { status: "failed", tests: 23 },
];

const config = {
  passed: { label: "Passed", color: "var(--success)" },
  skipped: { label: "Skipped", color: "var(--chart-5)" },
  failed: { label: "Failed", color: "var(--destructive)" },
} satisfies ChartConfig;

export default function PieChartSeparated() {
  return (
    <PieChart
      data={data}
      config={config}
      dataKey="tests"
      nameKey="status"
      innerRadius="70%"
      paddingAngle={3}
      cornerRadius={2}
      className="aspect-square max-w-60"
    >
      <ChartTooltip hideLabel />
      <PieChartLabel value="91%" label="Passed" />
    </PieChart>
  );
}
```

## Props

| Part | Extends |
| --- | --- |
| `PieChart` | [`Chart`](https://ui.jarv.is/components/chart.md) |
| `PieChartLabel` | — |

### PieChart

| Prop            | Type                        | Description                                                                                      |
| --------------- | --------------------------- | ------------------------------------------------------------------------------------------------ |
| `config`        | `ChartConfig`               | Each series' label, icon and color, keyed by its data key.                                       |
| `data`          | `Record<string, unknown>[]` | The rows to plot, one object per sector.                                                         |
| `dataKey`       | `string`                    | The key of each sector's value in its row.                                                       |
| `nameKey`       | `string`                    | The key of each sector's name in its row, which also names it in the config.                     |
| `innerRadius?`  | `string \| number`          | The radius of the hole, which makes a donut. A percentage is of the chart's radius. Default: `0` |
| `outerRadius?`  | `string \| number`          | The radius of the pie. A percentage is of the chart's radius. Default: `"80%"`                   |
| `paddingAngle?` | `number`                    | The angle, in degrees, between sectors. Default: `0`                                             |
| `cornerRadius?` | `number`                    | The radius of the sectors' corners. Default: `0`                                                 |
| `children?`     | `React.ReactNode`           |                                                                                                  |

### PieChartLabel

| Prop     | Type               | Description                                             |
| -------- | ------------------ | ------------------------------------------------------- |
| `value`  | `string \| number` | The figure in the middle of a donut, such as its total. |
| `label?` | `string`           | A line under the figure that says what it counts.       |