Pie Chart

Show proportions and percentages with circular charts.

Basic Pie Chart

Energy Mix

Distribution of energy sources

Donut Chart

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

Energy Distribution

With center label showing total

Semi-Circle Chart

Use start and end angles for gauge-style displays.

Solar Percentage

Proportion of solar in energy mix

Detailed Breakdown

Show more granular data with additional segments.

Detailed Energy Sources

Breakdown by source type

Comparison

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

Summer

High solar production

Winter

Lower solar production

Usage

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

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

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