Loading...
Loading...
> Interactive pie chart visualization component with legend, hover effects, and donut variant support.
1import { PieChart, PieChartDataItem } from "@/components/ui/pie-chart";
1const data: PieChartDataItem[] = [2 { label: "React", value: 45 },3 { label: "TypeScript", value: 30 },4 { label: "Node.js", value: 15 },5 { label: "PostgreSQL", value: 10 },6];78<PieChart data={data} />
1<PieChart2 data={data}3 innerRadius={60}4/>
1<PieChart2 data={data}3 showLabels={true}4 showLegend={false}5/>
1<PieChart2 data={data}3 showPercentages={false}4/>
1<PieChart data={data} size={200} />2<PieChart data={data} size={250} innerRadius={70} />
1<PieChart2 data={[3 { label: "Success", value: 40, color: "oklch(70% 0.2 145)" }, // Green4 { label: "Warning", value: 30, color: "oklch(80% 0.18 85)" }, // Yellow5 { label: "Error", value: 20, color: "oklch(60% 0.22 25)" }, // Red6 { label: "Info", value: 10, color: "oklch(65% 0.18 240)" }, // Blue7 ]}8/>
1<PieChart2 data={data}3 onSegmentClick={(item, index) => {4 // Handle segment click - show toast, navigate, etc.5 }}6/>
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | PieChartDataItem[] | - | Array of data items with label, value, and optional color |
| size | number | 300 | Chart diameter in pixels |
| showLabels | boolean | false | Display labels on pie segments (only if percentage > 5%) |
| showPercentages | boolean | true | Show percentage values in labels and legend |
| showLegend | boolean | true | Display interactive legend below chart |
| innerRadius | number | 0 | Inner radius for donut chart (0 = solid pie) |
| className | string | - | Additional CSS classes for the container |
| onSegmentClick | (item: PieChartDataItem, index: number) => void | - | Callback when a segment is clicked |