Loading...
Loading...
> A circular chart component for displaying proportional data with optional center content and interactive segments.
1import { DonutChart, MetricDonutChart, ProgressDonutChart } from "@/components/ui/donut-chart";
1<DonutChart2 data={[3 { label: "Design", value: 35, color: "oklch(70% 0.15 295)" },4 { label: "Development", value: 45, color: "oklch(70% 0.15 220)" },5 { label: "Marketing", value: 20, color: "oklch(70% 0.15 160)" },6 ]}7 size={300}8 thickness={60}9 showLegend={true}10/>
$250K
Total Revenue
Q4 2024
1<MetricDonutChart2 data={revenueData}3 size={320}4 thickness={60}5 metric={{6 value: "$250K",7 label: "Total Revenue",8 sublabel: "Q4 2024",9 }}10 showLegend={true}11/>
75%
Completion
42%
Storage Used
1<ProgressDonutChart2 value={75}3 size={200}4 thickness={30}5 label="Completion"6 showPercentage={true}7 color="oklch(70% 0.15 160)"8/>9<ProgressDonutChart10 value={42}11 size={200}12 thickness={30}13 label="Storage Used"14 showPercentage={true}15 color="oklch(70% 0.15 295)"16/>
1<DonutChart2 data={categoryData}3 size={280}4 thickness={50}5 showLegend={true}6 onSegmentClick={(item, index) => {7 setSelectedSegment(item.label);8 }}9/>
11K
Total Visits
Last 30 days
1<MetricDonutChart2 data={[3 { label: "Organic", value: 4200, color: "oklch(70% 0.15 160)" },4 { label: "Direct", value: 3100, color: "oklch(70% 0.15 220)" },5 { label: "Referral", value: 2300, color: "oklch(70% 0.15 295)" },6 { label: "Social", value: 1400, color: "oklch(70% 0.15 60)" },7 ]}8 size={320}9 thickness={60}10 metric={{11 value: "11K",12 label: "Total Visits",13 sublabel: "Last 30 days",14 }}15 showLegend={true}16/>
1<DonutChart2 data={categoryData}3 size={250}4 thickness={50}5 showLabels={true}6 showPercentages={true}7 showLegend={false}8/>
100%
Project Time
1<MetricDonutChart2 data={categoryData}3 size={280}4 thickness={30}5 metric={{6 value: "100%",7 label: "Project Time",8 }}9 showLegend={true}10/>
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | PieChartDataItem[] | - | Array of data segments with label, value, and color |
| size | number | 300 | Chart diameter in pixels |
| thickness | number | 60 | Ring thickness in pixels |
| showLabels | boolean | false | Show labels on chart segments |
| showPercentages | boolean | true | Show percentage values |
| showLegend | boolean | true | Display legend below chart |
| centerContent | React.ReactNode | - | Content to display in center of donut |
| onSegmentClick | (item: PieChartDataItem, index: number) => void | - | Callback when segment is clicked |
| className | string | - | Additional CSS classes |