Pie Chart
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/pie-chart
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the chart dependencies, then copy the component source into your project.
npm install recharts react-aria-components
Usage
Pass the numeric field to dataKey and the category field to nameKey. Use the category values as keys in config to provide labels and optional colors.
<PieChart
data={data}
dataKey="amount"
nameKey="name"
config={{
Organic: { label: "Organic" },
Paid: { label: "Paid" },
}}
/>Examples
Donut
Use the donut variant to leave room for a total or other summary in the center.
Custom center label
Pass SVG text as children when the center needs more than the built-in single-line label.
Interactive
Coordinate the chart with controls to emphasize a selected segment.
Gap
Forward Recharts options through pieProps to add spacing between slices.
Custom colors
Set colors by category in config to keep the visual meaning consistent across charts.
Component API
PieChart extends the Intent UI <BaseChart> props supported by radial charts.
chartPropsOmit<ComponentProps<typeof PieChartPrimitive>, "data" | "stackOffset">childrenReact.ReactNodeclassNamestringcolorsreadonly (ChartColorKeys | string)[]DEFAULT_COLORSconfigChartConfigcontainerHeightnumber370 desktop / 200 mobiledataRecord<string, any>[][]dataKeystringlabelstringnameKeystringpiePropsOmit<ComponentProps<typeof Pie>, "data" | "dataKey" | "name">showLabelbooleantooltipTooltipContentType<ValueType, NameType> | booleantruetooltipPropsBaseChartProps["tooltipProps"]valueFormatter(value: number) => string(value) => value.toString()variant"pie" | "donut"pieSee the Recharts PieChart API reference for primitive-specific options.
