PieChart

A pie chart component for visualizing proportions and compositions. Comes in Pie and Donut variants, with customizable label position and center text.

Variants

Label Mode

Indicator

Recharts

Base

Playground

Preview

Pie3 slices

Variant

Label

Slices

Options

<Chart config={chartConfig} className="w-full mx-auto aspect-square max-h-[300px]">
  <PieChart accessibilityLayer>
    <ChartTooltip content={<ChartTooltipContent hideLabel />} />
    <ChartLegend content={<ChartLegendContent nameKey="key" />} />
    <ChartPie data={chartData} dataKey="value" nameKey="name" />
  </PieChart>
</Chart>

JSX Composition

Chart.* Import Chart.* from this library — other components from Recharts.

Legend<ChartLegend />

Center LabelCSS overlay (donut only)

Patterns

Common PieChart display patterns — choose based on your use case.

Default Pie

Basic pie chart

Donut

Donut + center label

925Total

Outside Labels

Outside labels + legend

Styled Donut

Padded, rounded donut

API

Component Structure

Chart— Recharts

.PieProps.Tooltip.TooltipContentProps.Legend.LegendContent

.PiePropsPie (variant, label, activeShape)

.TooltipTooltip wrapper

.TooltipContentPropsTooltip content

.LegendLegend wrapper

.LegendContentLegend content

Props

Chart

config—

ChartConfig

Chart configuration object (label and color definitions)

children—

ReactElement

Recharts chart component

idundefined

string

Unique chart ID (used for CSS variable scoping)

Name	Type	Default	Description
`config`	`ChartConfig`	`—`	Chart configuration object (label and color definitions)
`children`	`ReactElement`	`—`	Recharts chart component
`id`	`string`	`undefined`	Unique chart ID (used for CSS variable scoping)

ChartPie

variant"pie"

"pie" | "donut"

Shape — "donut" auto-sets innerRadius

label"none"

"none" | "outside" | "inside"

Label position — outside: callout lines, inside: within slice (small slices auto-hidden)

labelContent"value"

"value" | "percent"

Content shown in the label

activeShapetrue

boolean

Expands the slice on hover

innerRadius0 (pie) / 60 (donut)

number

Inner radius — auto-set by variant, but can be overridden directly

paddingAngle0

number

Gap between slices (degrees)

cornerRadius0

number

Rounded corners on slices

startAngle90

number

Start angle (90 = 12 o'clock)

endAngle-270

number

End angle

Name	Type	Default	Description
`variant`	`"pie" \| "donut"`	`"pie"`	Shape — "donut" auto-sets innerRadius
`label`	`"none" \| "outside" \| "inside"`	`"none"`	Label position — outside: callout lines, inside: within slice (small slices auto-hidden)
`labelContent`	`"value" \| "percent"`	`"value"`	Content shown in the label
`activeShape`	`boolean`	`true`	Expands the slice on hover
`innerRadius`	`number`	`0 (pie) / 60 (donut)`	Inner radius — auto-set by variant, but can be overridden directly
`paddingAngle`	`number`	`0`	Gap between slices (degrees)
`cornerRadius`	`number`	`0`	Rounded corners on slices
`startAngle`	`number`	`90`	Start angle (90 = 12 o'clock)
`endAngle`	`number`	`-270`	End angle

ChartTooltipContent

indicator"dot"

"dot" | "line" | "dashed"

Indicator shape

hideLabelfalse

boolean

Hide the label

hideIndicatorfalse

boolean

Hide the indicator

colorundefined

string

Directly set the indicator color

nameKeyundefined

string

Name mapping for data keys

labelKeyundefined

string

Label key mapping

labelFormatterundefined

(value, payload) => ReactNode

Custom label formatter

formatterundefined

(value, name, item, index, payload) => ReactNode

Custom value formatter

Name	Type	Default	Description
`indicator`	`"dot" \| "line" \| "dashed"`	`"dot"`	Indicator shape
`hideLabel`	`boolean`	`false`	Hide the label
`hideIndicator`	`boolean`	`false`	Hide the indicator
`color`	`string`	`undefined`	Directly set the indicator color
`nameKey`	`string`	`undefined`	Name mapping for data keys
`labelKey`	`string`	`undefined`	Label key mapping
`labelFormatter`	`(value, payload) => ReactNode`	`undefined`	Custom label formatter
`formatter`	`(value, name, item, index, payload) => ReactNode`	`undefined`	Custom value formatter

ChartLegendContent

hideIconfalse

boolean

Hide the icon

nameKeyundefined

string

Name mapping for data keys

verticalAlign"bottom"

"top" | "middle" | "bottom"

Vertical alignment

align"center"

"left" | "center" | "right"

Horizontal alignment

layout"horizontal"

"horizontal" | "vertical"

Layout direction

Name	Type	Default	Description
`hideIcon`	`boolean`	`false`	Hide the icon
`nameKey`	`string`	`undefined`	Name mapping for data keys
`verticalAlign`	`"top" \| "middle" \| "bottom"`	`"bottom"`	Vertical alignment
`align`	`"left" \| "center" \| "right"`	`"center"`	Horizontal alignment
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction

Customization

The donut center label uses a CSS overlay — any HTML content can be freely customized.

Number + label

925Total

<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
  <span className="text-3xl font-bold">925</span>
  <span className="text-sm text-text-muted">Total</span>
</div>

Icon + percent

+12%Growth

<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
  <TrendingUp className="icon-md text-success" />
  <span className="text-lg font-bold">+12%</span>
  <span className="text-xs text-text-muted">Growth</span>
</div>

Rich content

Revenue$4.2k+8.5%

<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
  <span className="text-xs text-text-muted">Revenue</span>
  <span className="text-2xl font-bold">$4.2k</span>
  <span className="text-xs font-semibold text-success">+8.5%</span>
</div>

Tip：The center label is implemented as a CSS overlay (absolute + pointer-events-none) — text, icons, or custom components can be placed freely.

Anatomy

30%

Total82%

Desktop30%

Jan

Feb

Mar

Apr

May

Root

Chart wrapper

Chart Area

Plot area

Pie Segment

Data slice

Label

Slice label

Tooltip

Hover info

Legend

Series legend

Center Area

Donut center

Best Practices

✓

Do

✓Keep slices to 5–6 max
✓Use donut variant to show totals or KPIs in the center
✓Provide exact values via Tooltip
✓Use Legend to identify each slice
✓Always enable accessibilityLayer

Don't

✗Don't use more than 7 slices — use BarChart instead
✗Avoid when many values are similar — differences won't be visible
✗Don't use for time-series data — use LineChart
✗Don't rely on color alone — combine with Legend or labels

Accessibility

Keyboard

TabFocus the chart area

Arrow KeysMove between slices

ARIA / WCAG

Tooltip provides data values as text
Legend identifies each slice
Color tokens support dark mode automatically
activeShape provides hover feedback
accessibilityLayer enables keyboard + screen reader support

PieChart

Playground

Patterns

Default Pie

Donut

Outside Labels

Styled Donut

Tooltip Styles

Dot (default)

Line

Dashed

API

Component Structure

Props

Chart

ChartPie

ChartTooltipContent

ChartLegendContent

Customization

Number + label

Icon + percent

Rich content

Anatomy

Best Practices

Do

Don't

Accessibility

Keyboard

ARIA / WCAG

PieChart

Playground

Patterns

Default Pie

Donut

Outside Labels

Styled Donut

Tooltip Styles

Dot (default)

Line

Dashed

API

Component Structure

Props

Chart

ChartPie

ChartTooltipContent

ChartLegendContent

Customization

Number + label

Icon + percent

Rich content

Anatomy

Best Practices

Do

Don't

Accessibility

Keyboard

ARIA / WCAG

Related

BarChart

LineChart

AreaChart

MetricCard