Pie Charts

Show parts of a whole — as a pie, a donut with a centre total, or with a legend.

Browse charts Documentation

Pie Chart

Orders by month

First half of the year

Pie Chart

Default

Show parts of a whole — as a pie, a donut with a centre total, or with a legend.

Pie Chart

Donut with total

Pie Chart

With legend

Pie Chart

Labels

Pie Chart

Label list

Pie Chart

Donut with active sector

Pie Chart

Stacked rings

Pie Chart

Legend with values

Building18 h45%
Reviewing9 h23%
Meetings7 h18%
Support4 h10%
Planning2 h5%

Pie Chart

Half donut

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/chart.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Chart imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Every chart shares one foundation, the chart component — installing it also adds recharts. The examples on this page are what you copy into your own components.

A few interactive examples are built with other components from this site — card, toggle-group, tabs and select. Add the ones an example imports; the chart itself needs none of them.

Series are painted from a five-colour palette. The CLI adds these variables for you; on a manual install, add them to your global CSS:

:root {
  --chart-1: oklch(0.63 0.23 36);
  --chart-2: oklch(0.55 0.2 252);
  --chart-3: oklch(0.58 0.16 145);
  --chart-4: oklch(0.78 0.18 75);
  --chart-5: oklch(0.52 0.015 260);
}

.dark {
  --chart-1: oklch(0.72 0.19 36);
  --chart-2: oklch(0.66 0.19 252);
  --chart-3: oklch(0.68 0.17 145);
  --chart-4: oklch(0.85 0.17 75);
  --chart-5: oklch(0.72 0.012 260);
}

@theme inline {
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
}

Usage

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

// A pie has one config entry per slice, and each row carries its own fill.
const data = [
  { browser: 'chrome', visitors: 1240, fill: 'var(--color-chrome)' },
  { browser: 'safari', visitors: 860, fill: 'var(--color-safari)' },
]

const config = {
  chrome: { label: 'Chrome' },
  safari: { label: 'Safari' },
} satisfies ChartConfig

<ChartContainer config={config} className="mx-auto aspect-square w-full max-w-[280px]">
  <PieChart>
    <ChartTooltip content={<ChartTooltipContent hideLabel nameKey="browser" />} />
    <Pie data={data} dataKey="visitors" nameKey="browser" />
  </PieChart>
</ChartContainer>

API Reference

Name	Type	Default	Description
ChartContainer config	Record<string, { label: string; color?: string }>	—	Required. One entry per series (or pie slice). Each key becomes the CSS variable --color-<key>; colour defaults to --chart-1, --chart-2, … in order.
ChartContainer children	ReactElement	—	Required. One Recharts chart (AreaChart, BarChart, …). It is wrapped in a ResponsiveContainer for you.
ChartContainer className	string	aspect-video min-h-[200px] w-full	Sizes the chart. Override the aspect ratio or height here — e.g. mx-auto aspect-square w-full max-w-[280px] for polar charts.
ChartTooltipContent indicator	'dot' \| 'line' \| 'dashed'	'dot'	How each row’s colour marker is drawn.
ChartTooltipContent hideLabel	boolean	false	Hide the heading (the x-axis value).
ChartTooltipContent hideIndicator	boolean	false	Hide the colour markers.
ChartTooltipContent nameKey	string	—	Field of the data row that holds the name to look up in config — used by pie and radial charts.
ChartTooltipContent labelKey	string	—	Field of the data row to use as the heading instead of the axis value.
ChartTooltipContent labelFormatter	(label, payload) => ReactNode	—	Format the heading.
ChartTooltipContent formatter	(value, name, item) => ReactNode	—	Replace how a row’s value is rendered (numbers use thousands separators by default).
ChartLegendContent hideIcon	boolean	false	Hide the colour swatches.
ChartLegendContent nameKey	string	—	Field of the data row that holds the name to look up in config — used by pie charts.