A customizable pie chart component to visualize proportional data with support for donut charts. 🍰
pnpm dlx shadcn@latest add 'https://retroui.dev/r/pie-chart.json'| Prop | Type | Default | Description |
|---|---|---|---|
| data | Record<string, any>[] | [] | Array of data objects to display |
| dataKey | string | - | Key for the data values |
| nameKey | string | - | Key for the category names |
| colors | string[] | ["var(--chart-1)", ...] | Array of colors for the pie segments |
| innerRadius | number | 0 | Inner radius (use > 0 for donut chart) |
| outerRadius | number | 80 | Outer radius of the pie |
| tooltipBgColor | string | "var(--background)" | Background color for tooltips |
| tooltipBorderColor | string | "var(--border)" | Border color for tooltips |
| valueFormatter | (value: number) => string | (value) => value.toString() | Function to format values |
| showTooltip | boolean | true | Whether to show tooltips on hover |
| className | string | - | Additional CSS classes |
Last Updated: 12 Aug, 2025