[ [UI.30] Components ] Donut Chart

Donut Chart

> A circular chart component for displaying proportional data with optional center content and interactive segments.

Import

[ [0x5B] IMPORT ]

1import { DonutChart, MetricDonutChart, ProgressDonutChart } from "@/components/ui/donut-chart";

Preview

[ [0x00] DONUT CHART ]

Design(35.0%)

Development(45.0%)

Marketing(20.0%)

1<DonutChart
2  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/>

Variants

[ [0x00] WITH CENTER METRIC ]

Product Sales(50.0%)

Services(30.0%)

Subscriptions(20.0%)

$250K

Total Revenue

Q4 2024

1<MetricDonutChart
2  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/>

[ [0x00] PROGRESS DONUT ]

75%

Completion

42%

Storage Used

1<ProgressDonutChart
2  value={75}
3  size={200}
4  thickness={30}
5  label="Completion"
6  showPercentage={true}
7  color="oklch(70% 0.15 160)"
8/>
9<ProgressDonutChart
10  value={42}
11  size={200}
12  thickness={30}
13  label="Storage Used"
14  showPercentage={true}
15  color="oklch(70% 0.15 295)"
16/>

[ [0x00] INTERACTIVE SEGMENTS ]

Design(35.0%)

Development(45.0%)

Marketing(20.0%)

1<DonutChart
2  data={categoryData}
3  size={280}
4  thickness={50}
5  showLegend={true}
6  onSegmentClick={(item, index) => {
7    setSelectedSegment(item.label);
8  }}
9/>

[ [0x00] TRAFFIC SOURCES ]

Organic(38.2%)

Direct(28.2%)

Referral(20.9%)

Social(12.7%)

11K

Total Visits

Last 30 days

1<MetricDonutChart
2  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/>

[ [0x00] WITHOUT LEGEND ]

1<DonutChart
2  data={categoryData}
3  size={250}
4  thickness={50}
5  showLabels={true}
6  showPercentages={true}
7  showLegend={false}
8/>

[ [0x00] THIN RING STYLE ]

Design(35.0%)

Development(45.0%)

Marketing(20.0%)

100%

Project Time

1<MetricDonutChart
2  data={categoryData}
3  size={280}
4  thickness={30}
5  metric={{
6    value: "100%",
7    label: "Project Time",
8  }}
9  showLegend={true}
10/>

API Reference

[ [0x00] API REFERENCE ]

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

Accessibility

[ [0x58] A11Y ]

Built on top of PieChart component with donut-specific features
Segments are interactive and respond to clicks when onSegmentClick is provided
Legend provides accessible alternative to reading chart visually
Center content is positioned absolutely and excludes pointer events to allow segment clicks
MetricDonutChart variant includes semantic text hierarchy for metrics
ProgressDonutChart provides simple 2-segment progress visualization
All text elements meet WCAG AA contrast requirements

Preview

[ [0x00] DONUT CHART ]

Design(35.0%)

Development(45.0%)

Marketing(20.0%)

1<DonutChart
2  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/>

Variants

[ [0x00] WITH CENTER METRIC ]

Product Sales(50.0%)

Services(30.0%)

Subscriptions(20.0%)

$250K

Total Revenue

Q4 2024

1<MetricDonutChart
2  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/>

[ [0x00] PROGRESS DONUT ]

75%

Completion

42%

Storage Used

1<ProgressDonutChart
2  value={75}
3  size={200}
4  thickness={30}
5  label="Completion"
6  showPercentage={true}
7  color="oklch(70% 0.15 160)"
8/>
9<ProgressDonutChart
10  value={42}
11  size={200}
12  thickness={30}
13  label="Storage Used"
14  showPercentage={true}
15  color="oklch(70% 0.15 295)"
16/>

[ [0x00] INTERACTIVE SEGMENTS ]

Design(35.0%)

Development(45.0%)

Marketing(20.0%)

1<DonutChart
2  data={categoryData}
3  size={280}
4  thickness={50}
5  showLegend={true}
6  onSegmentClick={(item, index) => {
7    setSelectedSegment(item.label);
8  }}
9/>

[ [0x00] TRAFFIC SOURCES ]

Organic(38.2%)

Direct(28.2%)

Referral(20.9%)

Social(12.7%)

11K

Total Visits

Last 30 days

1<MetricDonutChart
2  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/>

[ [0x00] WITHOUT LEGEND ]

1<DonutChart
2  data={categoryData}
3  size={250}
4  thickness={50}
5  showLabels={true}
6  showPercentages={true}
7  showLegend={false}
8/>

[ [0x00] THIN RING STYLE ]

Design(35.0%)

Development(45.0%)

Marketing(20.0%)

100%

Project Time

1<MetricDonutChart
2  data={categoryData}
3  size={280}
4  thickness={30}
5  metric={{
6    value: "100%",
7    label: "Project Time",
8  }}
9  showLegend={true}
10/>

API Reference

[ [0x00] API REFERENCE ]

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

Accessibility

[ [0x58] A11Y ]

Built on top of PieChart component with donut-specific features
Segments are interactive and respond to clicks when onSegmentClick is provided
Legend provides accessible alternative to reading chart visually
Center content is positioned absolutely and excludes pointer events to allow segment clicks
MetricDonutChart variant includes semantic text hierarchy for metrics
ProgressDonutChart provides simple 2-segment progress visualization
All text elements meet WCAG AA contrast requirements