Doughnut Chart - Complete Guide

Doughnut chart generator creates ring-shaped visualizations similar to pie charts but with a hollow center. The center hole can display summary statistics or totals. Doughnut charts are slightly more readable than pie charts as humans compare arc lengths better than angles.

How It Works

Input category-value pairs like a pie chart. The generator renders proportional arcs around a ring shape. The cutout percentage (typically 50-70%) creates the center hole. Multiple rings can nest for hierarchical data. Customize colors, labels, and center content.

Technical Details

Doughnut charts use the same angle calculation as pie charts but render as arcs instead of full slices. Arc length = (value / total) × circumference. The cutout ratio controls hole size. Nested doughnuts should use consistent ordering across rings for comparison.

Common Use Cases

1. KPI Dashboard: Show metric breakdown with total in center.
   • Example: Total: $1.2M with revenue breakdown around
2. Goal Progress: Display completion percentage as a partial ring.
3. Category Breakdown: Visualize proportions with summary stat centered.
4. Hierarchical Data: Nested rings show parent-child category relationships.

Code Examples

Doughnut with Center Label

const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['Completed', 'In Progress', 'Pending'],
    datasets: [{
      data: [65, 25, 10],
      backgroundColor: ['#4BC0C0', '#FFCE56', '#E0E0E0']
    }]
  },
  options: {
    cutout: '60%',  // Hole size
    plugins: {
      legend: { position: 'bottom' }
    }
  }
});

// Add center text (using plugin or custom drawing)
// Center text: "65% Complete"

The cutout option controls hole size. Use plugins or custom drawing to add center labels.

Tips & Best Practices

• Use center space for total or key metric
• Cutout of 50-60% works well
• Same rules as pie: limit categories, no 3D
• Consider for progress indicators
• Nested rings for hierarchical data

Common Mistakes to Avoid

• Same as pie charts: too many slices, 3D effects
• Empty center when a total would add value
• Too thin arcs (cutout > 80%)
• Inconsistent ordering in nested rings

When to Use This Tool

Use doughnut charts as an alternative to pie charts when you want to display a total or key metric in the center. Subject to same limitations: few categories, part-to-whole relationships only.

Frequently Asked Questions

Is a doughnut chart better than a pie chart?

Slightly. Research suggests arc length (doughnut) is easier to compare than angle (pie). The center also provides space for context. However, both share the same limitations - few categories only, part-to-whole only.

What should go in the center?

The total value, a key metric, or a label. Example: "Total: $5.2M" or "Q4 2024". Keep it simple - one or two lines maximum. Some designs leave it empty for aesthetic reasons.

Can I use multiple rings?

Yes, nested doughnuts show hierarchical data (inner ring: categories, outer ring: subcategories). Keep to 2-3 rings maximum and maintain consistent ordering. Sunburst charts extend this concept further.

What cutout percentage should I use?

Typically 50-70%. Too small (< 30%) looks like a pie chart. Too large (> 80%) makes arcs thin and hard to distinguish. 50-60% balances readability with visual appeal.

Get Started

Ready to try Doughnut Chart? Use the tool now - it's free, fast, and works right in your browser.

---

Last updated: June 27, 2026