This entry is part of the Chart Index, the reference library for the Chart Design Field Guide.
The waffle chart is the antidote to the pie. For a part-to-whole display where you want the reader to perceive proportions precisely, a 10 × 10 grid of squares — each square one percent — does what the pie cannot: it lets the eye count. Twenty-six squares filled means 26%; thirty-four means 34%. There is no angle estimation, no slice comparison, no chartjunk.
It is the form that has gained traction in editorial information design, particularly at the New York Times, Washington Post, and Reuters Graphics desks. A waffle reads as a single object — a square block of squares — and it can be repeated, paired with a sentence, or used as an icon in dense layouts.
What it is
A waffle chart maps a categorical variable to colour and a quantitative variable to count of cells in a regular grid (typically 10 × 10 = 100 cells, each representing one percent). The grid is filled in order — usually bottom-to-top, left-to-right — and each category occupies a contiguous block of cells proportional to its share.
A 10 × 10 grid, partitioned into five satisfaction tiers. The eye can count blocks — promoter clearly fills almost half the grid, detractor a small corner — and a precise percentage is readable by counting. No legend dance, no proportion estimation.
When to use it
Waffle charts are the right choice when:
- You have part-to-whole data with 2–5 categories.
- The reader's question is "what proportion?" and you want the answer to be directly countable.
- The chart is editorial — a story illustration, a single statistic emphasised in context.
- You have room for the form — waffles do not shrink well; below ~80 pixels per side they become unreadable.
- The audience would be misled by a pie but is comfortable with grid-based forms.
When not to use it
- More than 5 categories. The grid blocks become small and the proportions hard to read.
- Non-integer percentages. A 23.7% value either rounds (loses precision) or sits as a partial cell (breaks the grid).
- Large dashboards. Waffles work as single statements, not as one chart among many. For dashboards, use bars or bullet charts.
- Comparing many waffles side by side. A row of twelve waffles is hard to compare; the eye loses the across-waffle position. Use stacked bars or 100% stacked bars instead.
Design principles
Use a 10 × 10 grid
The 100-cell grid is the convention because one cell = one percent is the most readable mapping. Variants exist — 5 × 20 strips, 6 × 6 grids of 36 cells for sample-size displays — but they all sacrifice the countable mental model. Default to 10 × 10.
Fill in a consistent direction
Bottom-to-top is the most readable: the eye sees the base of the dominant category at the bottom and counts upward. Left-to-right works for horizontal bands. Pick one direction and apply it consistently across charts.
Use one colour per category, plus background
The filled cells are the data; the unfilled cells (often shown as faint outlines) are the remaining whole. A waffle with no visible unfilled cells looks like an entirely filled grid; the visible empty cells are what convey the part-to-whole meaning.
Use icons for editorial impact
A waffle filled with small human icons (each icon = 1%) is a powerful form for population data. 34 of every 100 children… with 34 icon-people highlighted is more emotionally resonant than 34% of a circle. The form is sometimes called an isotype chart, after Otto Neurath's pictograms.
Quiet the grid lines
Cell separators should be hairline (0.5 pixel) and very light. Heavy separators turn the grid into a quilt. Some designs drop separators entirely and rely on cell colour difference to define each cell — this works only when fill and background contrast strongly.
Pair with a headline number
A waffle alone shows the proportion; a waffle with the percentage written next to it is impossible to misread. 34% — 1 in 3 customers alongside the grid is the editorial standard.
Be honest about rounding
If your real value is 34.7%, decide before drawing: round to 35 (lose precision), use 34 (lose precision differently), or document the rounding. Never display fractional cells — they break the perceptual contract.
Anatomy
A waffle chart's anatomy is a regular grid of cells, partitioned by category, with a quiet legend. The form's success is in its restraint — nothing competes with the cell count.
Related types
- Pie / donut chart — the form waffles often replace. Less precise, more familiar.
- Stacked bar (100%) — the same data as a single normalised bar.
- Isotype / pictogram — waffle with iconographic cells; emotional rather than analytical.
- Dot matrix — like a waffle but with dots instead of squares; same idea.
- Treemap — for many categories or hierarchical part-to-whole.
Reading list
- Neurath, O. (1936). International Picture Language. The original isotype design.
- Few, S. (2009). Now You See It. The case for waffles over pies in dashboards.
- Mike Bostock (2014). D3 Waffle Chart Examples. Web-native implementations.