DonutChart
A circular chart with a center cutout that displays proportional data. Perfect for showing composition or distribution of data in a visually appealing way.
Features
- Customizable inner radius for donut effect
- Optional legend display
- Hover effects on slices
- Click events for slice interaction
- Responsive sizing
- Custom colors support
- Accessible with ARIA labels
Examples
Basic DonutChart
Product A (30.0%)
Product B (25.0%)
Product C (20.0%)
Product D (15.0%)
Product E (10.0%)
<script>
import { DonutChart } from '$lib';
const data = [30, 25, 20, 15, 10];
const labels = ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'];
</script>
<DonutChart {data} {labels} size={300} />With Title and Legend
Market Share
Product A (30.0%)
Product B (25.0%)
Product C (20.0%)
Product D (15.0%)
Product E (10.0%)
<DonutChart
data={[30, 25, 20, 15, 10]}
labels={['Product A', 'Product B', 'Product C', 'Product D', 'Product E']}
title="Market Share"
showLegend={true}
size={300}
/>Custom Colors
Custom Colors
Product A (30.0%)
Product B (25.0%)
Product C (20.0%)
Product D (15.0%)
Product E (10.0%)
<DonutChart
data={[30, 25, 20, 15, 10]}
labels={['Product A', 'Product B', 'Product C', 'Product D', 'Product E']}
colors={['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6']}
title="Custom Colors"
showLegend={true}
size={300}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | Required | Array of numeric values for each slice |
labels | string[] | Required | Array of labels for each slice |
colors | string[] | Default palette | Array of colors (hex or Tailwind class names) |
title | string | undefined | Chart title |
innerRadius | number | 0.6 | Width of the donut ring (0-1, where 1 is full circle) |
showLegend | boolean | true | Show legend below chart |
size | number | 300 | Size of the chart in pixels |
Events
| Event | Detail | Description |
|---|---|---|
onsliceclick | { index: number; label: string; value: number } | Fired when a slice is clicked |
Accessibility
- SVG has proper ARIA role and label
- Each slice is keyboard accessible
- Color contrast meets WCAG AA standards
- Legend provides text alternative to colors
Best Practices
- Use for showing composition or parts of a whole
- Limit to 5-7 slices for clarity
- Use distinct colors for better differentiation
- Include a legend for accessibility
- Provide meaningful labels