# How to Make a Waffle Chart in Figma (Counting Beats Estimating)
_August 27, 2026 · 11 min read · by Systergon_
> A waffle chart is a grid of a hundred squares with some filled in, and it shows a proportion the way nobody else does: by being countable. Small percentages stay visible, the whole is explicit, and it needs no chart literacy at all — which is why risk communication reaches for it. The grid choices, the pictogram variant, and why building one by hand is often the right call.
Tags: Figma, Charts, Waffle Chart, Proportions, Plugin
URL: https://systergon.com/blog/figma-charts-waffle-chart
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the waffle gallery →](https://systergon.com/figma-charts/chart-types/waffle)

A waffle chart is a grid of a hundred squares with some of them filled in. It shows a proportion the way nobody else does: **by being countable**. Where a pie asks the reader to judge an angle and a bar asks them to compare lengths, a waffle lets them count — and counting is not an estimate, it is exact.

![A waffle chart drawn by Nivo inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-waffle-chart/images/waffle-nivo.svg)

_Real plugin output: a Nivo waffle chart captured from the editor. Every chart on this page is the library’s own drawing._

That makes it the best part-to-whole chart for a general audience and for small percentages, and a poor one for anything with more than a few categories. This page is about that trade, and about the related form — the pictogram — that does the same job with icons instead of squares.

## First — get the plugin

Everything below happens inside **Figma Charts**, a Figma plugin. It runs the real JavaScript charting libraries — Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts — inside the plugin window, so the grid on your canvas is the library’s own layout.

[Install Figma Charts from the Figma Community →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts)

Press **⌘/** (**Ctrl /** on Windows), type _Figma Charts_, hit Enter, and pick **Waffle** from the category filter. One example, from Nivo — and it is the only library here with the type.

## Why counting beats estimating

Every part-to-whole chart makes the reader do a perceptual task. A pie asks for an angle judgement, a stacked bar for a length comparison, a treemap for an area comparison — and people are unreliable at all three, in known and documented ways.

A waffle asks for none of them. Each square is one unit; the reader counts, or estimates by counting rows, and either way the answer is exact rather than approximate. Three consequences follow:

- **Small percentages stay visible.** Three percent is three squares — unmissable. Three percent of a pie is a sliver you cannot label, and three percent of a treemap is a strip.
- **The whole is explicit.** A hundred squares is a hundred per cent, drawn. Nobody has to trust that the parts sum to something.
- **It needs no chart literacy.** This is the strongest argument for it: a waffle can be read by someone who has never been taught to read a chart, which makes it the right choice for public communication, onboarding and anything a non-specialist audience must act on.

There is a fourth benefit that only appears in practice: **a waffle is easy to annotate**. Because the cells are discrete objects, a bracket around a block or a callout on a single square lands cleanly — where annotating “this slice” of a pie means pointing at a wedge.

The cost is resolution. A hundred cells means one percentage point per cell, so 12.4% and 12.6% are the same picture. That is usually fine — and where it is not, this is the wrong chart.

## Waffle against the alternatives

![A pie chart drawn by Nivo, for comparison with the waffle chart above](https://systergon.com/blog/figma-charts-waffle-chart/images/waffle-pie-contrast.svg)

_The same job done by a pie: one shape divided by angle. It is more compact and more familiar, and it cannot show a three-percent slice legibly, cannot be counted, and requires the reader to accept that the parts add up._

Against a [pie](https://systergon.com/blog/figma-charts-pie-chart): the waffle wins on small values, precision and readability; the pie wins on compactness and instant recognition. Against a [100% stacked bar](https://systergon.com/blog/figma-charts-bar-chart): the bar is far more compact and stacks for comparison across groups; the waffle is easier for a lay audience and shows small shares better. Against a plain number: the number is exact and forgettable; the waffle makes a proportion _felt_, which is why it appears in public-health and civic communication constantly.

## When a waffle is the wrong chart

**1. You have more than three or four categories.** Every extra colour makes the grid harder to parse, and the blocks stop being contiguous. Past four, use a stacked bar.

**2. Precision below one percentage point matters.** A hundred-square grid has a resolution of one point. You can move to a 10×20 or 20×20 grid, at which point the squares are small and countable only in principle.

**3. You need to compare many groups.** Twelve waffles for twelve regions is a wall. Small multiples work up to about six; beyond that, a 100% stacked bar chart per region communicates faster.

A fourth: **when the total is not a hundred of something.** A waffle implies each square is one unit of a whole. If your denominator is 4,812 tickets, each square is 48 tickets — which is fine, provided you say so, and which quietly undermines the countability that made the chart worth choosing.

## Why risk communication uses this chart

The waffle’s natural home is explaining probability to people who have to act on it, and the reason is worth understanding because it generalises.

“A 12% chance” is an abstraction most readers convert badly — research on risk communication has found consistently that percentages are systematically misjudged, and that **frequency framings are understood far better**: twelve people in a hundred, drawn as twelve figures out of a hundred. The waffle is that framing made visual, which is why it appears in medical decision aids, public-health material and safety briefings.

Three practices come from that world and transfer directly to product and dashboard work:

**Show the denominator as ink.** The unfilled cells are not empty space, they are the ninety-eight people it did not happen to. Keeping them visible is what stops a small number reading as large.

**Use one grid per comparison, not two scales.** Comparing 12-in-100 with 18-in-100 works because both grids are identical. It fails the moment one grid represents a different population.

**Say what the population is, in the chart.** “Out of 100 customers who started a trial” changes the meaning entirely from “out of 100 visitors”, and the grid itself cannot express the difference.

## Building one by hand, which is often the right call

Since a waffle is a grid of identical marks, hand-building it in Figma is both easy and frequently better than rendering one. The recipe takes a few minutes.

**One cell as a component.** A square with two variants — filled and empty — or a colour property. Then a 10×10 auto-layout grid of instances.

**Set the fill count, not the geometry.** Switching the first twelve instances to the filled variant is the whole interaction, and it takes seconds to update when the number changes.

**Swap the square for an icon** when you want a pictogram — same grid, different component, no chart engine involved.

The advantage over an inserted chart is control: cell shape, corner radius, gaps, icon choice and per-cell annotation are all native Figma properties rather than chart options. The advantage of using the plugin is that the numbers come from your data and the rounding is done for you — so the sensible workflow is often to render one, insert it as SVG, and then rebuild the cell as a component once the counts are settled.

## Building one, step by step

Six screens, start to finish, captured from the plugin.

![The Figma Charts gallery filtered to the Waffle category](https://systergon.com/blog/figma-charts-waffle-chart/images/step-gallery.webp)

_**1. Filter to Waffle.** Nivo has the only example. It is one of the narrowest categories in the plugin — and one of the easiest charts to build by hand if your library lacks it._

![The Figma Charts editor with a waffle chart in the preview](https://systergon.com/blog/figma-charts-waffle-chart/images/step-editor.webp)

_**2. The editor.** Live preview above, tabs below. Waffles want a square-ish frame: a 10×10 grid in a wide frame produces stretched cells that stop reading as countable units._

![The Data tab showing the values behind a waffle chart](https://systergon.com/blog/figma-charts-waffle-chart/images/step-data.webp)

_**3. Parts and a total.** One row per category with its value, plus the total the grid represents. The total is the setting that decides what one square means._

![The Configuration tab showing waffle option groups](https://systergon.com/blog/figma-charts-waffle-chart/images/step-config.webp)

_**4. Configure.** Rows and columns, cell padding, fill direction and colours. Fill direction matters more than it sounds — bottom-up reads as filling, left-to-right reads as progress._

![The Export tab showing code export formats](https://systergon.com/blog/figma-charts-waffle-chart/images/step-export.webp)

_**5. Export.** Nivo exports to React, so for this chart the library choice constrains the handoff — though a waffle is also the easiest chart here to rebuild from scratch._

![The + SVG and + PNG insert buttons](https://systergon.com/blog/figma-charts-waffle-chart/images/step-insert.webp)

_**6. Insert.** SVG gives you a hundred real rectangles, which is exactly what you want: swapping them for icons, rounding the corners or restyling a block is then a canvas operation._

## The data shape it needs

A label and a value per category, plus the **total** the grid stands for. That last part is what separates this from a bar chart’s data: the chart needs to know what counts as a full grid, because the empty cells are as meaningful as the filled ones — they are the remainder.

Two decisions to make deliberately. **What one square means** — one per cent, ten people, a thousand pounds — and it belongs in the caption whenever it is not one per cent. And **how to round**: values rarely land on whole squares, and the rounding has to be visible somewhere, because a reader counting squares will get a slightly different number from the one in your table.

Waffles take a linked data source like any table-shaped chart, though the total usually lives in the configuration rather than the data — so a live value will keep being drawn against whatever denominator you set.

## Library by library

The **Waffle** category holds **one example, in Nivo**, and no other library in the plugin has the type. That sounds limiting and mostly is not, because of what a waffle is made of.

- **Nivo — 1 example**, with configurable rows, columns, fill direction and per-category colours. React-only export.
- **Everyone else — build it.** A waffle is a grid of identical squares, which is the single easiest chart in this series to construct by hand: in Figma, a 10×10 grid of rectangles as a component with a fill count. It is also easy in code as a heatmap with fixed cell values, or as a stacked bar wrapped over ten rows.

That is worth saying plainly because it changes the decision: for most other chart types, “my library does not have it” is a real constraint. Here it is fifteen minutes of layout work, and the hand-built version is often better — you control the cell shape, the gaps and the icons.

As always: **design in whichever library your engineers already use**, because the export then matches production exactly. [Choosing the right chart library](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library) covers the trade-offs.

## The pictogram, which is the same chart with icons

Replace the squares with icons — people, cars, houses, trees — and a waffle becomes a pictogram, or isotype chart. Everything on this page still applies, and two rules come with the icons.

**Repeat the icon; never scale it.** Ten people are ten person-icons, not one person drawn ten times as tall. A scaled icon is an area comparison with all the imprecision that implies, and it is the classic way pictograms mislead.

**Partial icons need care.** Half a person is a convention readers accept for “half a unit”; a quarter is pushing it. Round to halves, or use plain squares where the fractions matter.

The payoff is that a pictogram carries subject matter as well as quantity: a grid of small house icons says “housing” before anyone reads the label. In Figma this is straightforward — insert the waffle as SVG and swap the rectangles for a component instance.

## Styling it well

**Gaps between cells, always.** A grid with no gaps is a rectangle; the gaps are what make the units countable, which is the entire point.

**Keep filled and unfilled clearly distinct.** The remainder should read as an empty container, not as a second category — a light neutral against a saturated fill.

**Fill in reading order.** Left to right, top to bottom, or bottom to top for “filling up” metaphors. Random or spiral fills destroy countability.

**Keep blocks contiguous.** With two or three categories, each should occupy a solid run of cells rather than being scattered. Scattered cells cannot be counted at a glance and turn the chart into a pattern.

**Square cells, modest count.** 10×10 is the canonical grid because a hundred is the number people think in. 5×20 works for a wide card; 20×20 gives quarter-point resolution and stops being countable.

For type and colour, bind them to your design system rather than picking by hand — covered in [Your chart, your design system](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens).

## Reading it well — and the ways it misleads

**Rounding is invisible.** 12.6% becomes thirteen squares and 12.4% becomes twelve, and the chart shows no trace of the decision. Where the rounding matters, print the exact figure alongside.

**One square is not always one unit.** If the grid represents 4,812 tickets, each square is 48 — and readers will still count squares as though they were counting things. Say what a square means whenever it is not one per cent.

**Scattered categories exaggerate.** A category whose cells are spread across the grid looks larger than the same count in a solid block, because it touches more of the picture.

**Empty is a value.** The unfilled cells are the remainder, and they need to be understood as such. If the chart shows three categories that do not sum to the total, the empty cells are a fourth, unlabelled category.

**Multiple waffles need identical grids.** Comparing two waffles works only if both are the same size with the same unit. Two 10×10 grids representing different totals look directly comparable and are not.

## Choosing the grid

The grid dimensions are the one structural decision, and three options cover nearly every case.

**10×10.** The default and the best-understood: a hundred cells, one percentage point each, and “out of a hundred” is how people already think about proportions. Choose it unless there is a reason not to.

**5×20 or 4×25.** The same hundred cells in a wide shallow band, for a card or a table cell. It reads left-to-right like a progress bar made countable, and it fits where a square will not.

**A grid matched to the real count.** When the population is small and known — twenty-three team members, thirty classrooms — drawing exactly that many cells is far stronger than converting to percentages. Every cell is a real thing, the denominator is honest, and nothing is rounded.

What to avoid is a grid whose size implies a precision you do not have. A 20×20 grid says quarter-point resolution; if your data is a rounded percentage, the extra cells are inventing certainty.

## Accessibility

**Countability is an accessibility feature.** A reader who cannot distinguish two hues can still count cells if the blocks are contiguous and the boundary between categories is visible — so keep the runs solid and consider a gap or a rule between categories.

**Do not rely on subtle colour differences.** With two or three categories there is room for genuinely distinct colours; use it rather than tints of one hue.

**State the unit in text.** “Each square = 1%” belongs on the chart, not just in the caption.

**Give it a text equivalent.** The Export tab’s **Copy Alt Text**, **Copy Data Table** and **Set Node Desc** produce a description, a table of the numbers and a description written onto the Figma node. For a waffle the exact percentages are what the grid rounded away, so the table is genuinely additional information.

## Common questions

### What is a waffle chart good for?

Showing a proportion to an audience that should not have to interpret a chart. Each square is one unit, so the reader counts rather than estimating — which makes small percentages visible and the whole explicit. It is the strongest part-to-whole chart for public communication.

### Waffle or pie chart?

Waffle when the values include small percentages, when precision matters, or when the audience is general. Pie when space is tight and the shares are few and large. The waffle’s advantage is that three per cent is three squares; in a pie it is an unlabelable sliver.

### How many categories can it hold?

Three or four. Each additional colour makes the grid harder to parse and the blocks less contiguous, and contiguity is what makes counting possible. Beyond four, a 100% stacked bar is the better chart.

### Which libraries can draw one?

**Nivo only** in this plugin — one example. That matters less than usual: a waffle is a grid of identical squares, so it is the easiest chart here to build by hand in Figma or in code, and the hand-built version gives you control over cell shape and icons.

### What does one square represent?

Whatever you define, and you must define it. One per cent is the default and needs no explanation; anything else — ten people, a thousand pounds — belongs in a note on the chart, because readers count squares as though they were counting things.

### What is the difference between a waffle and a pictogram?

The mark. A pictogram replaces the squares with icons, which adds subject matter to the quantity. The rules are the same, plus one: repeat the icon rather than scaling it, since a scaled icon turns a countable chart back into an area comparison.

### How should I handle rounding?

Round to whole cells and print the exact figure nearby. The chart cannot show 12.4% differently from 12.6%, and a reader counting squares will otherwise get a number that disagrees with your table.

### Why is this chart used for risk and probability?

Because frequency framings are understood far more reliably than percentages: “12 in 100” drawn as twelve filled cells out of a hundred is read correctly by people who misjudge “12%”. Keeping the unfilled cells visible is essential — they are the denominator, and they are what stop a small number from reading as a large one.

### Does the chart stay editable in Figma?

Insert as **SVG** and you get a hundred real rectangles — ideal, because swapping them for an icon component, rounding the corners or restyling one block all become canvas operations. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Waffle, and build one for a proportion you would normally draw as a pie — then show both to someone who does not work with data. The waffle will be read correctly and quickly, and if your smallest category is under five per cent, it will be the only one of the two where that category is visible at all.

[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Browse all 45 chart types →](https://systergon.com/figma-charts/chart-types)