Free · Recharts · Editable React source

Pie Foundation

A flexible Recharts pie and donut base with selectable segments and custom palettes.

ThemeStateContainer width · 100%

showTooltipCustom colors

Pie foundation

Show a concise part-to-whole relationship

View accessible data

Pie foundation data
channel	share
	46
	27
	18
	9

This is the installable component, not a mockup. Width is a preview container setting; theme and colors use your app’s shadcn CSS variables.

Select a mark or an accessible data-table value to inspect the callback.

Waiting for an interaction…

Edit sample data · JSON

01 / Installation

Your code. Your project.

Use an initialized shadcn/Tailwind React project. The URL installs the component and its shared files recursively. No namespace configuration, platform account, or agent files.

Next.js, Vite & manual setup →

npx shadcn@latest add https://beautifulcharts.dev/r/recharts-pie-foundation.json

Package dependencies: recharts. Shared files are included in Source above. The installed license file covers the free source.

For a manual install, add those packages, copy every listed Source file to its displayed path, and adjust the @/ alias if your project uses a different one.

02 / Component API

Make it yours.

Types, defaults, and source below are generated from the distributed component. Numeric values must be finite; recipe-specific bounds are checked in source. Formatters change displayed labels, not the underlying measurements.

Pie Foundation props
Prop	Type	Default	Required
data	PieChartDatum[]	sampleData	No
nameKey	string	"channel"	No
valueKey	string	"share"	No
title	string	"Pie foundation"	No
subtitle	string	"Show a concise part-to-whole relationship"	No
innerRadius	number \| string	"54%"	No
palette	string[]	defaultPalette	No
onSelect	(datum: PieChartDatum, index: number) => void	—	No
showTooltip	boolean	true	No
valueFormatter	(value: unknown) => string	—	No
ariaDescription	string	—	No
children	ReactNode	—	No
isLoading	boolean	—	No
className	string	—	No

Exact data and series types

export type PieChartDatum = Record<string, string | number>;

export type PieFoundationProps = {
  data?: PieChartDatum[]; nameKey?: string; valueKey?: string; title?: string; subtitle?: string;
  innerRadius?: number | string; palette?: string[]; onSelect?: (datum: PieChartDatum, index: number) => void; showTooltip?: boolean; valueFormatter?: (value: unknown) => string; ariaDescription?: string; children?: ReactNode; isLoading?: boolean; className?: string;
};

Pie Foundation

Your code. Your project.

Make it yours.

shadcn theming

Native customization

Accessible states