Pie Chart
Pie charts are used to represent proportions or percentages of a whole, making them ideal for showing part-to-whole relationships. They include donut variants.
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/pie-chart
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install recharts react-aria-components
Examples
Donut
Visualize data with a donut chart for a modern and clean look.
Label inside
Enhance your donut chart by adding descriptive text for better understanding.
Component "visualizations/pie-chart/pie-chart-donut-label-demo" not found in the registry.
Controlled
Sometimes you might want to control the chart data dynamically.
Gap
Add spacing between pie slices for better visibility and aesthetics.
Component API
The PieChart component renders proportional data as pie or donut charts.
| Prop | Type | Default |
|---|---|---|
chartProps | Omit<ComponentProps<typeof PieChartPrimitive>, "data" | "stackOffset"> | - |
children | React.ReactNode | - |
className | string | - |
colors | readonly (ChartColorKeys | string)[] | DEFAULT_COLORS |
config | ChartConfig | - |
containerHeight | number | 370 desktop / 200 mobile |
data | Record<string, any>[] | [] |
dataKey | string | - |
label | string | - |
nameKey | string | - |
pieProps | Omit<ComponentProps<typeof Pie>, "data" | "dataKey" | "name"> | - |
showLabel | boolean | - |
tooltip | TooltipContentType<ValueType, NameType> | boolean | true |
tooltipProps | BaseChartProps["tooltipProps"] | - |
valueFormatter | (value: number) => string | (value) => value.toString() |
variant | "pie" | "donut" | pie |
See the Recharts for the full API reference.
Unlock the full power ofIntent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.