> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mzizi.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Pie chart

> Pie and donut charts for proportions, with the legend that makes them accessible.

Pie charts show proportional data as segments of a circle. Use them when showing parts of a whole. Limit to 5-7 segments for readability.

## Basic pie chart

```tsx theme={null}

const data = [
  { name: "Farming", value: 420, color: "var(--color-malachite)" },
  { name: "Mining", value: 380, color: "var(--color-terracotta)" },
  { name: "Travel", value: 290, color: "var(--color-cobalt)" },
  { name: "Tourism", value: 510, color: "var(--color-tanzanite)" },
  { name: "Sports", value: 340, color: "var(--color-gold)" },
]

const chartConfig = {
  farming: { label: "Farming", color: "var(--color-malachite)" },
  mining: { label: "Mining", color: "var(--color-terracotta)" },
  travel: { label: "Travel", color: "var(--color-cobalt)" },
  tourism: { label: "Tourism", color: "var(--color-tanzanite)" },
  sports: { label: "Sports", color: "var(--color-gold)" },
}

<ChartContainer config={chartConfig} className="h-[300px]">
  <PieChart>
    <Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={100}>
      {data.map((entry) => (
        <Cell key={entry.name} fill={entry.color} />
      ))}
    </Pie>
    <ChartTooltip content={<ChartTooltipContent />} />
  </PieChart>
</ChartContainer>
```

## Donut chart

A donut chart is a pie chart with a hollow center, useful for showing a total value:

```tsx theme={null}
<Pie
  data={data}
  dataKey="value"
  nameKey="name"
  cx="50%"
  cy="50%"
  innerRadius={60}
  outerRadius={100}
>
  {data.map((entry) => (
    <Cell key={entry.name} fill={entry.color} />
  ))}
</Pie>
```

### With center label

Display a summary value in the center of the donut:

```tsx theme={null}
<PieChart>
  <Pie data={data} dataKey="value" innerRadius={60} outerRadius={100}>
    {data.map((entry) => (
      <Cell key={entry.name} fill={entry.color} />
    ))}
  </Pie>
  <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle" className="fill-foreground text-2xl font-bold">
    1,940
  </text>
  <text x="50%" y="58%" textAnchor="middle" className="fill-muted-foreground text-xs">
    Total events
  </text>
</PieChart>
```

## With legend

Always pair pie charts with a legend for accessibility:

```tsx theme={null}
<ChartContainer config={chartConfig} className="h-[350px]">
  <PieChart>
    <Pie data={data} dataKey="value" nameKey="name" innerRadius={60} outerRadius={100}>
      {data.map((entry) => (
        <Cell key={entry.name} fill={entry.color} />
      ))}
    </Pie>
    <ChartLegend content={<ChartLegendContent />} />
    <ChartTooltip content={<ChartTooltipContent />} />
  </PieChart>
</ChartContainer>
```

## Styling guidelines

* Limit to **5-7 segments** — more becomes unreadable
* Use the mineral palette for category data: malachite, terracotta, cobalt, tanzanite, gold
* Use the chart tokens (`--chart-1` through `--chart-5`) for non-category data
* Always include a legend — relying on color alone fails accessibility
* Prefer donut charts over filled pie charts — the center can display summary data
* Set `paddingAngle={2}` for visual separation between segments
* Use `cornerRadius={4}` for rounded segment edges (modern look)