# Pie Chart

> A composable pie and donut chart with animated slices, hover interactions, patterns, gradients, and an interactive legend

Source: https://ui.cortexcn.dev/docs/charts/pie-chart

## Installation

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

## Usage

The Pie Chart uses a composable API similar to other charts in the library. Build charts by combining components:

```tsx
import { PieChart, PieSlice } from "@/components/charts";

const data = [
  { label: "Electronics", value: 4250, color: "#0ea5e9" },
  { label: "Clothing", value: 3120, color: "#a855f7" },
  { label: "Food", value: 2100, color: "#f59e0b" },
];

export default function SalesChart() {
  return (
    <PieChart data={data} size={280}>
      {data.map((_, index) => (
        <PieSlice key={index} index={index} />
      ))}
    </PieChart>
  );
}
```

## Components

### PieChart

The root component that provides context to all children.

| Prop            | Type                              | Default  | Description                                   |
| --------------- | --------------------------------- | -------- | --------------------------------------------- |
| `data`          | `PieData[]`                       | required | Array of pie data items                       |
| `size`          | `number`                          | auto     | Fixed size in pixels (uses parent if not set) |
| `innerRadius`   | `number`                          | `0`      | Inner radius for donut charts (0 = solid pie) |
| `padAngle`      | `number`                          | `0`      | Padding angle between slices (radians)        |
| `cornerRadius`  | `number`                          | `0`      | Corner radius for rounded slice edges         |
| `startAngle`    | `number`                          | `-PI/2`  | Start angle in radians (top)                  |
| `endAngle`      | `number`                          | `3*PI/2` | End angle in radians (full circle)            |
| `hoveredIndex`  | `number \| null`                  | -        | Controlled hover state                        |
| `onHoverChange` | `(index: number \| null) => void` | -        | Hover state callback                          |
| `className`     | `string`                          | `""`     | Additional CSS class                          |

### PieSlice

Renders an individual slice with animated arc and hover effects.

| Prop          | Type                              | Default           | Description                                                    |
| ------------- | --------------------------------- | ----------------- | -------------------------------------------------------------- |
| `index`       | `number`                          | required          | Index of the slice in the data array                           |
| `color`       | `string`                          | from data/palette | Optional color override                                        |
| `fill`        | `string`                          | -                 | Optional fill for patterns/gradients (e.g., `url(#patternId)`) |
| `animate`     | `boolean`                         | `true`            | Enable animation on mount                                      |
| `showGlow`    | `boolean`                         | `true`            | Show glow effect on hover                                      |
| `hoverEffect` | `"translate" \| "grow" \| "none"` | `"translate"`     | Hover animation type                                           |
| `hoverOffset` | `number`                          | `10`              | Distance in pixels for hover effect                            |

### PieCenter

Displays content in the center of a donut chart. Only renders when `innerRadius > 0`.

| Prop            | Type               | Default   | Description                         |
| --------------- | ------------------ | --------- | ----------------------------------- |
| `defaultLabel`  | `string`           | `"Total"` | Label shown when not hovering       |
| `formatOptions` | `NumberFlowFormat` | -         | Number formatting options           |
| `prefix`        | `string`           | -         | Prefix before the value (e.g., "$") |
| `suffix`        | `string`           | -         | Suffix after the value (e.g., "%")  |
| `children`      | `function`         | -         | Custom render function              |
| `className`     | `string`           | `""`      | Additional CSS class                |

### Legend

A composable legend component for pie charts and other visualizations. See the full [Legend documentation](https://ui.cortexcn.dev/docs/utility/legend) for all components and options.

## Data Shape

```ts
interface PieData {
  label: string; // Display label
  value: number; // Value (determines slice size)
  color?: string; // Optional color (falls back to palette)
  fill?: string; // Optional fill for patterns/gradients
}

interface LegendItemData {
  label: string;
  value: number;
  color: string;
}
```

See the [charts gallery](https://ui.cortexcn.dev/charts/pie-chart) for donut charts, patterns, gradients, legend sync, and hover effects.

## Theming

The Pie Chart uses CSS variables for theming. Slice colors default to `--chart-1` through `--chart-5`:

```css
:root {
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
}

.dark {
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
}
```

## Animation

The pie chart features animations on mount:

1. **Slice Appearance** - Slices animate in with staggered timing
2. **Hover Effects** - Slices scale up on hover with glow effect
3. **Fade Effect** - Non-hovered slices fade when another slice is hovered
4. **Center Content** - Value animates when switching between slices

All animations use spring physics for natural motion.

## Dependencies

```bash
pnpm add @visx/shape @visx/group @visx/responsive @visx/pattern @visx/gradient d3-shape motion
```