How do I make a donut chart in shadcn/ui?

Turn on Donut. The generated Pie gets an innerRadius and a center label that shows the total, computed from your data at render time.

What data does a pie chart need?

Two columns: a category and a numeric value. Blank values are left out of the chart.

When should I not use a pie chart?

With many small categories or when comparing close values. A horizontal bar chart is easier to read in those cases.

Shadcn Pie & Donut Chart

Show part-to-whole breakdowns with a shadcn/ui pie chart, or switch to a donut with the total in the center.

CSV, TSV from Excel/Sheets, a Markdown table, or JSON.

CSV

Style

Labels

Code

EngineeringDesignMarketingOperationsOther

Image

chart.tsx

"use client"

import { Pie, PieChart } from "recharts"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const data = [
  { Category: "Engineering", Value: 45 },
  { Category: "Design", Value: 20 },
  { Category: "Marketing", Value: 18 },
  { Category: "Operations", Value: 12 },
  { Category: "Other", Value: 5 },
]

const chartConfig: ChartConfig = {
  "Engineering": { label: "Engineering", color: "var(--chart-1)" },
  "Design": { label: "Design", color: "var(--chart-2)" },
  "Marketing": { label: "Marketing", color: "var(--chart-3)" },
  "Operations": { label: "Operations", color: "var(--chart-4)" },
  "Other": { label: "Other", color: "var(--chart-5)" },
}

export function Chart() {
  const chartData = data.map((row) => ({ ...row, fill: chartConfig[String(row.Category)]?.color }))

  return (
    <ChartContainer config={chartConfig} className="aspect-square h-[350px] w-full [&_.recharts-pie-label-text]:fill-foreground">
      <PieChart>
        <ChartTooltip content={<ChartTooltipContent nameKey="Category" hideLabel />} />
        <ChartLegend content={<ChartLegendContent nameKey="Category" />} verticalAlign="bottom" itemSorter={null} />
        <Pie data={chartData} dataKey="Value" nameKey="Category" label={(props) => String(props.value ?? "")} stroke="var(--card)" strokeWidth={2} />
      </PieChart>
    </ChartContainer>
  )
}

When to use a pie or donut chart

Pie and donut charts work for a few categories that add up to a meaningful whole.

Budget or headcount by team
Traffic share by browser or device
Plan mix across customers

Data format

Use exactly 2 columns: Category,Value.
Keep it to about 6 slices; group the long tail into Other.
Paste CSV, JSON from your API, TSV copied from Excel or Google Sheets, or a Markdown table. The generated component keeps your column names as its data keys.

CSV

Category,Value
Engineering,45
Design,20
Marketing,18
Operations,12
Other,5

Same data as JSON

[
  {"category": "Engineering", "value": 45},
  {"category": "Design", "value": 20},
  {"category": "Marketing", "value": 18},
  …
]

Options

Donut: Hollow center with the total, rounded padded slices.
Labels: Show each slice's value, percent, or name.
Colors: Custom color per slice.

How to add it to your project

1. Add the shadcn/ui chart component (it installs Recharts):
npx shadcn@latest add chart
2. Paste your data above, pick the options, and copy the generated chart.tsx.
3. Save it in your project (e.g. components/pie-chart.tsx) and render <Chart />, or <Chart data={rows} /> in Data as prop mode.