# ASCII Pie Chart

> A pie or donut in braille that sweeps in clockwise and pops a slice out on hover.

Category: Charts. Docs: https://asciicn.sumak.dev/docs/ascii-pie-chart

## Installation

```bash
npx shadcn@latest add @asciicn/ascii-pie-chart
```

Needs the `@asciicn` registry in components.json: `"registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" }`.

## Usage

```tsx
import { AsciiPieChart } from "@/components/ascii/ascii-pie-chart"

<AsciiPieChart
  label="Traffic by browser"
  data={[
    { label: "chrome", value: 64 },
    { label: "safari", value: 19 },
    { label: "firefox", value: 9 },
  ]}
/>
```

## Examples

### A donut with a total

`innerRadius` hollows the pie out and puts the total in the middle. Hover a slice and the middle shows that slice instead.

```tsx
<AsciiPieChart
  label="Storage"
  data={[
    { label: "photos", value: 112 },
    { label: "video", value: 64, className: "text-sky-500" },
    { label: "apps", value: 38, className: "text-amber-500" },
  ]}
  innerRadius={0.6}
  format={(v) => `${v}GB`}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | `{ label, value, className? }[]` |  | One slice per entry, clockwise from twelve o'clock. `className` colours it; otherwise a six-colour palette in turn. |
| `label` | `string` |  | Names the chart for screen readers and captions its data table. |
| `width` | `number` | `24` | Diameter in characters. It is half as many rows tall, since braille dots come out square. |
| `innerRadius` | `number` | `0` | Hole size from 0 to 1. Above 0 it becomes a donut with the total, or the active slice, in the middle. |
| `legend` | `boolean` | `true` | List each slice with its value and share. |
| `format` | `(v) => string` | `String` | Formats values in the legend, the middle and the data table. |
| `animate` | `boolean` | `true` | Sweep the slices in clockwise the first time the chart scrolls into view. |

## Notes

- **Accessibility.** A focusable group named by `label`. Arrow keys step through slices, Escape clears, and a live region reads the slice, its value and share. A visually hidden table holds every slice.
- **Interaction.** Hovering a slice or its legend row pops it out along its middle and fades the rest.
- **Motion.** The sweep runs 0.9s with a strong ease-out the first time the chart is 40% in view. The pop and fade take 0.2s. Under `prefers-reduced-motion` the chart appears whole and nothing moves.
- **Geometry.** `pie()` is exported and returns one braille layer per slice plus each slice's cumulative end, for custom layouts.
- **Dependencies.** `motion` for the sweep and transitions.