Pie Chart

Show proportions and percentages with circular charts.

Basic Pie Chart

Device Mix

Distribution of traffic sources

Donut Chart

Add an inner radius to create a donut shape, perfect for displaying a total value.

Traffic Distribution

With center label showing total

Semi-Circle Chart

Use start and end angles for gauge-style displays.

Desktop Percentage

Proportion of desktop in device mix

Detailed Breakdown

Show more granular data with additional segments.

Detailed Traffic Sources

Breakdown by source type

Comparison

Use multiple pie charts to compare different time periods or categories.

Summer

High desktop production

Winter

Lower desktop production

Usage

import { Pie, PieChart, Cell, Label } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

const data = [
  { name: "desktop", value: 65, fill: "var(--color-desktop)" },
  { name: "mobile", value: 25, fill: "var(--color-mobile)" },
]

<ChartContainer config={chartConfig} className="min-h-[300px]">
  <PieChart>
    <ChartTooltip content={<ChartTooltipContent hideLabel />} />
    <Pie
      data={data}
      dataKey="value"
      nameKey="name"
      cx="50%"
      cy="50%"
      innerRadius={60}  {/* Set > 0 for donut */}
      outerRadius={100}
      strokeWidth={2}
      paddingAngle={2}  {/* Gap between segments */}
    >
      {/* Optional center label for donut */}
      <Label content={...} />
    </Pie>
    <ChartLegend content={<ChartLegendContent nameKey="name" />} />
  </PieChart>
</ChartContainer>