Dark Mode
Colors
Drag And Drop
Forms
{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Pie Chart","description":"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.","url":"https://intentui.com/docs/components/visualizations/pie-chart","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/visualizations/pie-chart"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Visualizations","item":"https://intentui.com/docs/components/visualizations"},{"@type":"ListItem","position":5,"name":"Pie Chart","item":"https://intentui.com/docs/components/visualizations/pie-chart"}]}]}
Pie Chart
Loading...
Installation
Install the component via the CLI in one command.
npm
pnpm
yarn
bun
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
pnpm
yarn
bun
npm install recharts react-aria-components
Examples
Donut
Visualize data with a donut chart for a modern and clean look.
Loading...
Label inside
Enhance your donut chart by adding descriptive text for better understanding.
Component "visualizations/pie-chart/pie-chart-donut-label-example" not found in the registry.
Controlled
Sometimes you might want to control the chart data dynamically.
Loading...
Gap
Add spacing between pie slices for better visibility and aesthetics.
Loading...
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.
