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

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:

<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:

<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:

<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)