Pie and Donut Charts

Show part-to-whole relationships with pie and donut charts.

---

Basic Pie Chart

Show proportions of a whole.

View Source

type: pie
data:
  source: '[{"category": "Product A", "value": 35}, {"category": "Product B", "value": 25}, {"category": "Product C", "value": 20}, {"category": "Product D", "value": 12}, {"category": "Other", "value": 8}]'
x: category
y: value
title: Market Share

When to use: Showing how parts make up a whole (percentages).

Tip: Limit to 5-7 slices. Group small values into "Other".

---

Donut Chart v1.1+

Pie chart with a hole in the center.

View Source

type: donut
data:
  source: '[{"status": "Completed", "count": 45}, {"status": "In Progress", "count": 30}, {"status": "Not Started", "count": 15}, {"status": "Blocked", "count": 10}]'
x: status
y: count
title: Task Status

When to use: Same as pie, but with space for a label or metric in the center.

---

Donut with Center Label

Show a summary value in the center.

View Source

type: donut
data:
  source: '[{"category": "Used", "value": 75}, {"category": "Free", "value": 25}]'
x: category
y: value
innerRadius: 0.6
centerLabel: "75%"
title: Storage Usage

---

From Aggregated Data

Count items by category from a dataset.

View Source

type: pie
data:
  file: data/projects.csv
transformations:
  - type: aggregate
    configuration:
      groupBy: ["status"]
      count: ["name"]
x: status
y: name_count
title: Projects by Status

---

Custom Colors

Assign specific colors to categories.

View Source

type: donut
data:
  source: '[{"status": "Success", "count": 85}, {"status": "Warning", "count": 10}, {"status": "Error", "count": 5}]'
x: status
y: count
scales:
  color:
    domain: ["Success", "Warning", "Error"]
    range: ["#22c55e", "#f59e0b", "#ef4444"]
title: System Health

---

Configuration Options

Option	Type	Default	Description
innerRadius	number	0 (pie) / 0.5 (donut)	Hole size (0-1)
showLabels	boolean	true	Show slice labels
showPercentage	boolean	false	Show percentage on labels
centerLabel	string	-	Text in donut center

---

When NOT to Use Pie Charts

Pie charts are often misused. Avoid them when:

Situation	Better Alternative
Comparing across time	Line or bar chart
More than 7 categories	Bar chart
Showing exact values	Bar chart
Categories are similar sizes	Bar chart

---

Tips

Common Mistake: Using pie charts for data that doesn't sum to a meaningful whole.

Tip: Donut charts are often better than pie charts - they're easier to read and leave room for annotations.

---

See Also

• Bar Charts - Better for comparisons
• Hierarchical Charts - For nested proportions