Examples · Waffle chart

Waffle chart examples

A waffle chart — the square pie chart — turns shares into a grid of a hundred squares. A 3% answer is three squares you can point at, where a donut sliver disappears; hover any square and its whole part lights up, with the exact share in the legend.

When to use it

  • Shares where the small parts matter — a sliver of a pie vanishes, three squares out of a hundred do not
  • Audiences who count better than they judge angles: a waffle is literally countable
  • Survey summaries and unit-based stories — one square can stand for one answer, one seat, one grant

Not the right shape?

Many parts with close shares — past seven or eight, adjacent groups of squares blur together. A sorted bar chart compares fifteen categories honestly; a waffle cannot.

Real-world examples

Four hundred squares for finer shares

options.units raises the grid's resolution: at 400 squares each one is a quarter point, so a 6.1% share lands on 24 squares instead of rounding to 6. The trade is texture for precision.

Open in maker with this data

View the spec 
{
  "type": "waffle",
  "theme": "mint",
  "title": "Browser share of visits",
  "source": "Web analytics, this quarter",
  "options": {
    "units": 400
  },
  "data": {
    "labels": [
      "Chrome",
      "Safari",
      "Edge",
      "Firefox",
      "Other"
    ],
    "series": [
      {
        "name": "Visits",
        "values": [
          61.2,
          17.8,
          9.4,
          6.1,
          5.5
        ]
      }
    ]
  }
}

Where the grant went

Money splits read well as squares because the whole is fixed by definition: every dollar sits in exactly one part, and the biggest block is visibly more than half.

Open in maker with this data

View the spec 
{
  "type": "waffle",
  "theme": "neon",
  "title": "Grant spending by area",
  "source": "Project report, final",
  "data": {
    "labels": [
      "Research",
      "Equipment",
      "Travel",
      "Admin"
    ],
    "series": [
      {
        "name": "Share",
        "values": [
          52,
          28,
          12,
          8
        ]
      }
    ]
  }
}
Open this chart in a maker Chart maker from scratch

Questions people ask

What is a waffle chart?

A part-to-whole chart drawn as a grid — a hundred squares by default — where each part fills its share of the squares. It answers the same question as a pie chart, but with countable units instead of angles, which is why it's sometimes called a square pie chart.

Waffle chart or pie chart?

Both show shares of one whole. The pie (drawn as a donut here) summarizes faster when one slice dominates; the waffle stays honest when the small parts are the story, because a 2% part is still two visible squares. The engine morphs between the two, legend and all.

Why 100 squares?

Because a hundred units make every square exactly one percent — the grid is its own scale. When that's too coarse, options.units accepts up to 400 squares; when one square should equal one real thing (one answer, one seat), set units to match your total.