Pie & Doughnut Charts: Part-to-Whole

Pie charts show how parts contribute to a whole. Each slice represents a proportion of the total - making them ideal for answering "What share does each category have?"

When to Use Pie Charts

Pie charts work best when:

• Parts add up to a meaningful whole (100%)
• You have few categories (ideally 2-5, max 6-7)
• You want to show general proportions, not precise values
• The differences between slices are substantial (>5%)

They're NOT ideal when:

• You have many small categories
• You need to compare precise values
• Parts don't sum to a meaningful whole
• Changes over time matter more than current proportions

Try It: Revenue Distribution Explorer

Explore QuickBite's revenue breakdown by different dimensions. Toggle between pie and doughnut styles, and adjust the explode effect:

Pie vs Doughnut: When to Choose Each

Pie Chart

• Classic, immediately recognizable
• Works well for simple compositions
• Area proportions are clearer

Doughnut Chart

• Center space can display totals or labels
• Slightly easier to compare similar-sized slices
• Looks more modern
• Better for nested/hierarchical data

The Problem with Pie Charts

Despite their popularity, pie charts have significant drawbacks:

1. Humans are Bad at Comparing Angles

Quick - which is larger: a 23% slice or a 27% slice? It's surprisingly hard to tell. Bar charts make this comparison trivial.

2. Many Slices Become Unreadable

With 8+ categories, pie charts become a colorful mess. Consider grouping small categories into "Other."

3. Multiple Pies are Hard to Compare

If you need to compare composition across groups (e.g., category mix by city), multiple pie charts are confusing. Use grouped bar charts instead.

Best Practices

1. Limit Categories

Keep to 5-7 slices maximum. Group smaller items into "Other."

2. Order Slices Logically

• Start at 12 o'clock
• Largest slice first (clockwise)
• Or order by inherent logic (time, alphabetical)

3. Use Direct Labels When Possible

Labels pointing to slices are clearer than relying solely on legends.

4. Make the Total Meaningful

Pie charts only make sense when parts sum to 100% of something. "Revenue by category" works; arbitrary groupings don't.

Code Example

Here's how to create a styled doughnut chart:

const chart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['Credit Card', 'Debit Card', 'Digital Wallet', 'Cash'],
    datasets: [{
      data: [85000, 45000, 52000, 18000],
      backgroundColor: ['#2dd4bf', '#fbbf24', '#a78bfa', '#94a3b8'],
      borderColor: '#0f172a',
      borderWidth: 2,
      offset: 4, // Slight explosion
      hoverOffset: 12 // More explosion on hover
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom'
      },
      tooltip: {
        callbacks: {
          label: (context) => {
            const total = context.dataset.data.reduce((a, b) => a + b, 0);
            const pct = ((context.raw / total) * 100).toFixed(1);
            return `${context.raw.toLocaleString()} (${pct}%)`;
          }
        }
      }
    }
  }
});

Alternatives to Pie Charts

Consider these alternatives for better clarity:

Key Takeaways

• Pie charts show part-to-whole relationships
• Limit to 5-7 slices for readability
• Use doughnut style when you need center space for labels
• Consider bar charts when precision matters or you have many categories
• Always ensure parts sum to a meaningful whole

Next, we'll explore scatter plots for discovering relationships between variables.