PieChart
A traditional pie chart for displaying proportional data. Each slice represents a portion of the whole, making it ideal for showing composition and distribution.
Features
- Clean, traditional pie chart design
- Optional legend display
- Hover effects on slices
- Click events for slice interaction
- Responsive sizing
- Custom colors support
- Accessible with ARIA labels
Examples
Basic PieChart
Chrome (35.0%)
Firefox (25.0%)
Safari (20.0%)
Edge (20.0%)
<script>
import { PieChart } from '$lib';
const data = [35, 25, 20, 20];
const labels = ['Chrome', 'Firefox', 'Safari', 'Edge'];
</script>
<PieChart {data} {labels} size={300} />With Title and Legend
Browser Market Share
Chrome (35.0%)
Firefox (25.0%)
Safari (20.0%)
Edge (20.0%)
<PieChart
data={[35, 25, 20, 20]}
labels={['Chrome', 'Firefox', 'Safari', 'Edge']}
title="Browser Market Share"
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 |
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