# PieChart

Parts of one whole.

- Group: Charts
- Import: `import { PieChart } from '@misoto22/design/charts'`
- Page: https://ui.misoto22.com/components/pie-chart/
- Related: radial-chart, bar-chart

## When to reach for it

Roughly what share, and nothing more precise. Ranking or comparing wedges — especially across two pies — is a BarChart’s job.

## Accessibility

- title is required; the rows are also rendered as a visually hidden table.
- The legend sits under the pie by default, because a pie has no category axis naming its sectors.
- Compose a Label to print the numbers on the wedges: a pie’s weakness is that an angle is hard to read, and a printed number removes the guess.
- One fill variant, deliberately. A wedge is small and awkwardly shaped, and a texture inside one reads as noise.

## PieChart

Parts of one whole. Worth saying plainly: a pie answers "roughly what share" and nothing more precise. Comparing two adjacent wedges by eye is unreliable past about five of them, and comparing a wedge across two pies is worse. When the reader needs to rank or compare, a `<BarChart>` answers the same question better.

### Props

- `config` (required) — `ChartConfig`. Sector names → their label and paint. Keys must match the `nameKey` values.
- `data` (required) — `TData[]`. The rows the chart draws. One entry per point, bar or category.
- `dataKey` (required) — `keyof TData & string`. The row field holding each sector's number.
- `nameKey` (required) — `keyof TData & string`. The row field holding each sector's name.
- `title` (required) — `string`. What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed.
- `showTitle` — `boolean`. Prints the title above the plot instead of hiding it from sight.
- `description` — `ReactNode`. A line under the title — the unit, the window, the caveat.
- `children` (required) — `ReactNode`. The composed parts — axes, grid, tooltip, legend, and the marks themselves.
- `className` — `string`. Merged onto the figure, last, so a call site can size or space it.
- `chartProps` — `ComponentProps<typeof RechartsPieChart>`. Escape hatch onto the raw Recharts chart element.
- `defaultSelectedSector` — `string | null` default `null`. The sector lit on first render.
- `onSelectionChange` — `(selection: { name: string; value: number } | null) => void`. Fires when the selection changes, and with null when it is cleared.
- `isLoading` — `boolean` default `false`. Swaps the marks for an animated skeleton, keeping the measured height so the page does not jump when the data lands.
- `hideDataTable` — `boolean` default `false`. Drops the hidden table view. Only correct when the page prints the data itself.

## Example — default

```tsx
import { PieChart, type ChartConfig } from '@misoto22/design/charts'

<PieChart
  title="Visitors by browser"
  config={config}
  data={data}
  dataKey="visitors"
  nameKey="browser"
>
  <PieChart.Pie />
  <PieChart.Tooltip />
  <PieChart.Legend />
</PieChart>
```

## Example — shape

```tsx
import { ToggleGroup, ToggleGroupItem } from '@misoto22/design'
import { PieChart, type ChartConfig } from '@misoto22/design/charts'

<div className="flex w-full flex-col gap-4">
  <ToggleGroup
    type="single"
    value={shape}
    onValueChange={(next) => next && setShape(next as Shape)}
    aria-label="Shape"
  >
    {(Object.keys(SHAPES) as Shape[]).map((option) => (
      <ToggleGroupItem key={option} value={option}>
        {option}
      </ToggleGroupItem>
    ))}
  </ToggleGroup>

  <PieChart
    title={`Visitors by browser — ${shape}`}
    config={config}
    data={data}
    dataKey="visitors"
    nameKey="browser"
  >
    <PieChart.Pie {...SHAPES[shape]} />
    <PieChart.Tooltip />
    <PieChart.Legend />
  </PieChart>
</div>
```

## Example — labels and emphasis

```tsx
import { PieChart, type ChartConfig } from '@misoto22/design/charts'

<div className="grid w-full gap-8 lg:grid-cols-2">
  {/* Worth reaching for: a pie's whole weakness is that an angle is hard to
      read, and a printed number removes the guess entirely. */}
  <PieChart
    title="Labelled"
    showTitle
    config={config}
    data={data}
    dataKey="visitors"
    nameKey="browser"
  >
    <PieChart.Pie innerRadius="45%">
      <PieChart.Label />
    </PieChart.Pie>
    <PieChart.Legend />
  </PieChart>

  <PieChart
    title="One wedge is the point"
    showTitle
    config={config}
    data={data}
    dataKey="visitors"
    nameKey="browser"
  >
    <PieChart.Background variant="overlapping-circles" />
    <PieChart.Pie innerRadius="50%" glowingSectors={['chrome']} isClickable />
    <PieChart.Tooltip />
    <PieChart.Legend isClickable />
  </PieChart>
</div>
```

## Example — loading

```tsx
import { PieChart, type ChartConfig } from '@misoto22/design/charts'

<PieChart
  title="Visitors by browser"
  config={config}
  data={[]}
  dataKey="visitors"
  nameKey="browser"
  isLoading
>
  <PieChart.Pie innerRadius="50%" />
</PieChart>
```