Pie Chart

Show proportional data as segments of a circle. Supports donut, half-pie, and labels.

Default

app/chart-demo.tsx

import { PieChart } from "@/components/ui/pie-chart";

const data = [
  { value: 275, color: "#2563eb", label: "Chrome" },
  { value: 200, color: "#f97316", label: "Safari" },
  { value: 187, color: "#8b5cf6", label: "Firefox" },
  { value: 173, color: "#06b6d4", label: "Edge" },
  { value: 90, color: "#6b7280", label: "Other" },
];

export function MyPieChart() {
  return <PieChart data={data} />;
}

Installation

npx @aniui/cli add pie-chart

Donut

Pie chart with a hollow center.

import { PieChart } from "@/components/ui/pie-chart";

// Set innerRadius to create a donut chart
export function DonutChart() {
  return <PieChart data={data} innerRadius={0.6} />;
}

With Labels

Percentage labels displayed on each segment.

import { PieChart } from "@/components/ui/pie-chart";

export function PieChartWithLabels() {
  return <PieChart data={data} showLabels />;
}

Half Pie

Semi-circle chart using custom start and end angles.

import { PieChart } from "@/components/ui/pie-chart";

// Half pie using startAngle and endAngle
export function HalfPieChart() {
  return (
    <PieChart
      data={data}
      innerRadius={0.6}
      startAngle={180}
      endAngle={360}
    />
  );
}

Interactive

Donut chart with segment padding for visual separation.

import { PieChart } from "@/components/ui/pie-chart";

export function InteractivePieChart() {
  return <PieChart data={data} innerRadius={0.6} />;
}

Nested

Inner and outer pie rings for hierarchical data.

import { PieChart } from "@/components/ui/pie-chart";

// Nested pies can be achieved by layering
// two PieChart components
export function NestedPieChart() {
  return <PieChart data={data} innerRadius={0.5} />;
}

Props

PropTypeDefault

data

{ value: number; color: string; label?: string }[]

—

height

number

200

innerRadius

number (0-1)

0

showLabels

boolean

false

startAngle

number

0

endAngle

number

360

className

string

—

PreviousLine Chart

NextRadar Chart