Waffle Chart

Description

A waffle chart displays proportions as colored cells within a regular grid, typically 10x10 (100 cells), where each cell represents 1% of the total. Categories are assigned distinct colors, and the appropriate number of cells are filled for each category, creating a mosaic-like pattern. The result communicates part-to-whole relationships with greater perceptual accuracy than pie charts because humans estimate counts of discrete units more reliably than they judge arc angles or areas.

The standard 100-cell format makes percentages immediately readable — counting colored cells gives the exact proportion. This explicitness is one of the waffle chart’s key strengths in data journalism and infographics, where the audience may not be trained in reading statistical graphics. The discrete, countable units also create an emotional connection: when each cell represents a person, the chart powerfully conveys the human scale of statistics.

Waffle charts are most effective for showing a small number of categories (2-5) where the proportions are not too extreme. Very small proportions (below 2-3%) become a single cell or vanish entirely in a 100-cell grid, requiring either a larger grid or a different chart type. Multiple waffle charts placed side by side enable comparison across groups or time periods, functioning as a form of small multiples.

When to Use

• Showing part-to-whole relationships where perceptual accuracy matters more than aesthetics
• Communicating percentages to a general audience in infographics or reports
• Emphasizing the human or unit-level meaning of statistics (e.g., “42 out of 100 people”)
• Comparing proportions across groups when placed side by side

When NOT to Use

• When there are many categories (>5) — the grid becomes a confusing patchwork; use a stacked bar chart
• When very small proportions need to be shown precisely — a single cell in a 100-grid gives only 1% resolution; use a bar chart
• When continuous changes over time need to be shown — use a stacked area chart or line graph
• When the total is not meaningful (e.g., comparing independent quantities) — use a bar chart
• When you need to show exact values rather than proportions — use a bar chart with value labels

Anatomy

• Grid: A regular arrangement of cells, typically 10x10 (100 total), sometimes 10x5 or custom sizes
• Cells (squares): Individual units in the grid, each representing an equal fraction of the whole
• Fill color: Each cell is colored according to its category
• Legend: Maps colors to category names with percentage or count labels
• Grid ordering: Cells are typically filled left-to-right, bottom-to-top (like reading a book in reverse)
• Optional grouping: A gap between waffle grids when comparing multiple groups

Variations

• Icon waffle (isotype chart): Cells are replaced with pictographic icons (people, trees, coins), strengthening the unit metaphor
• Stacked waffle: Multiple grids stacked vertically for comparing groups over time
• Circular waffle: Cells arranged in a circular pattern, blending the waffle concept with a donut chart shape
• Large-N waffle: Uses 1000 or more cells for finer resolution, though readability decreases
• Animated waffle: Cells fill in sequentially, creating a dramatic reveal of proportions

Code Reference

// Observable Plot - waffle chart via cell mark
const grid = [];
let idx = 0;
for (const {label, value} of data) {
  for (let i = 0; i < value; i++, idx++) {
    grid.push({
      x: idx % 10, y: Math.floor(idx / 10),
      label, value
    });
  }
}

Plot.plot({
  marks: [Plot.cell(grid, {x: "x", y: "y", fill: "label", inset: 1, tip: true})],
  x: {axis: null}, y: {axis: null},
  color: {legend: true}
})