Pie Chart

Sectors of a circle, for the parts of a whole.

Storage

9.2 of 10 GB used

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartLegend, ChartTooltip, type ChartConfig } from "@/components/ui/chart";
import { PieChart, PieChartLabel } from "@/components/ui/pie-chart";

const data = [
  { type: "documents", size: 3.4 },
  { type: "images", size: 2.6 },
  { type: "video", size: 2.1 },
  { type: "other", size: 1.1 },
];

const config = {
  documents: { label: "Documents" },
  images: { label: "Images" },
  video: { label: "Video" },
  other: { label: "Other" },
} satisfies ChartConfig;

export default function PieChartStorage() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardTitle>Storage</CardTitle>
        <CardDescription>9.2 of 10 GB used</CardDescription>
      </CardHeader>
      <CardContent>
        <PieChart
          data={data}
          config={config}
          dataKey="size"
          nameKey="type"
          innerRadius="62%"
          className="aspect-square"
        >
          <ChartTooltip hideLabel valueFormatter={(size) => `${size} GB`} />
          <ChartLegend align="center" verticalAlign="bottom" />
          <PieChartLabel value="9.2 GB" label="Used" />
        </PieChart>
      </CardContent>
    </Card>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add pie-chart
pnpm dlx shadcn@latest add @jarvis/pie-chart

Usage

import { ChartTooltip, type ChartConfig } from "@/components/ui/chart";
import { PieChart } from "@/components/ui/pie-chart";

const data = [
  { browser: "chrome", visitors: 275 },
  { browser: "safari", visitors: 200 },
  { browser: "firefox", visitors: 187 },
];

const config = {
  chrome: { label: "Chrome" },
  safari: { label: "Safari" },
  firefox: { label: "Firefox" },
} satisfies ChartConfig;

export function BrowsersChart() {
  return (
    <PieChart data={data} config={config} dataKey="visitors" nameKey="browser">
      <ChartTooltip hideLabel />
    </PieChart>
  );
}

Each row is a sector, labeled and colored by its nameKey entry in the config. The tooltip and legend come from Chart.

Composition

PieChart

Examples

Pie

Without an innerRadius, the chart is a full pie.

import { ChartLegend, ChartTooltip, type ChartConfig } from "@/components/ui/chart";
import { PieChart } from "@/components/ui/pie-chart";

const data = [
  { browser: "chrome", visitors: 275 },
  { browser: "safari", visitors: 200 },
  { browser: "firefox", visitors: 187 },
  { browser: "edge", visitors: 173 },
  { browser: "other", visitors: 90 },
];

const config = {
  chrome: { label: "Chrome" },
  safari: { label: "Safari" },
  firefox: { label: "Firefox" },
  edge: { label: "Edge" },
  other: { label: "Other" },
} satisfies ChartConfig;

export default function PieChartBasic() {
  return (
    <PieChart
      data={data}
      config={config}
      dataKey="visitors"
      nameKey="browser"
      className="aspect-square max-w-xs"
    >
      <ChartTooltip hideLabel />
      <ChartLegend align="center" verticalAlign="bottom" />
    </PieChart>
  );
}

Separated

paddingAngle and cornerRadius separate the sectors. PieChartLabel puts a figure in the middle.

import { ChartTooltip, type ChartConfig } from "@/components/ui/chart";
import { PieChart, PieChartLabel } from "@/components/ui/pie-chart";

const data = [
  { status: "passed", tests: 1284 },
  { status: "skipped", tests: 96 },
  { status: "failed", tests: 23 },
];

const config = {
  passed: { label: "Passed", color: "var(--success)" },
  skipped: { label: "Skipped", color: "var(--chart-5)" },
  failed: { label: "Failed", color: "var(--destructive)" },
} satisfies ChartConfig;

export default function PieChartSeparated() {
  return (
    <PieChart
      data={data}
      config={config}
      dataKey="tests"
      nameKey="status"
      innerRadius="70%"
      paddingAngle={3}
      cornerRadius={2}
      className="aspect-square max-w-60"
    >
      <ChartTooltip hideLabel />
      <PieChartLabel value="91%" label="Passed" />
    </PieChart>
  );
}

Props

Part	Extends
PieChart	Chart
PieChartLabel	—

PieChart

Prop	Type	Default
`config` Each series' label, icon and color, keyed by its data key.	`ChartConfig`	—
`data` The rows to plot, one object per sector.	`Record<string, unknown>[]`	—
`dataKey` The key of each sector's value in its row.	`string`	—
`nameKey` The key of each sector's name in its row, which also names it in the config.	`string`	—
`innerRadius` The radius of the hole, which makes a donut. A percentage is of the chart's radius.	`string \| number`	`0`
`outerRadius` The radius of the pie. A percentage is of the chart's radius.	`string \| number`	`"80%"`
`paddingAngle` The angle, in degrees, between sectors.	`number`	`0`
`cornerRadius` The radius of the sectors' corners.	`number`	`0`
`children`	`React.ReactNode`	—

PieChartLabel

Prop	Type	Default
`value` The figure in the middle of a donut, such as its total.	`string \| number`	—
`label` A line under the figure that says what it counts.	`string`	—