Overview
DonutChart displays data as proportional segments with an optional center metric. Great for showing distribution or breakdown of a whole. Best used with 6 or fewer categories.
Features
- Automatic or custom segment colors
- Optional center label and value display
- Percentage labels on segments
- Interactive tooltips showing values
- Configurable inner/outer radius
- Click handlers for drill-down
Examples
Basic Donut Chart
Simple donut with auto colors
Insight Distribution
By category
With Center Metric
Center label with total value
Total Insights
Total
119
Custom Segment Colors
Semantic colors for status
Completion Status
Complete
68%
With Segment Labels
Percentage labels on segments
Distribution
Compact Size
Smaller ring for compact spaces
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | DonutChartSegment[] | required | Array of segments with label, value, optional color |
centerLabel | string | - | Label displayed in center |
centerValue | string | number | - | Value displayed in center |
showLabels | boolean | false | Show percentage labels on segments |
innerRadius | number | 60 | Inner radius (donut hole size) |
outerRadius | number | 80 | Outer radius |
onSegmentClick | function | - | Click handler for segments |
Usage
import { DonutChart, ChartCard } from '@/ui/components/charts';
// Basic donut chart
<ChartCard title="Insight Distribution">
<DonutChart
data={[
{ label: 'Issues', value: 45 },
{ label: 'Features', value: 32 },
{ label: 'Praise', value: 18 },
]}
/>
</ChartCard>
// With center label and custom colors
<ChartCard title="Completion Status">
<DonutChart
data={[
{ label: 'Completed', value: 68, color: 'var(--success)' },
{ label: 'In Progress', value: 22, color: 'var(--primary)' },
]}
centerLabel="Total"
centerValue={90}
/>
</ChartCard>