React chart example
Waffle chart
Show parts of a whole as a grid of squares, usually a hundred.
What is a waffle chart?
A waffle chart fills a grid — typically ten by ten — with coloured cells in proportion to each category's share, so one cell equals one per cent.
When to use it
Use it for a small number of shares where readers should be able to count. The grid makes percentages concrete in a way angles do not. Use a donut when the exact figures matter less than the overall split, and a bar chart when there are more than about five categories.
Design tips
Keep the grid to a round number so one cell is a clean unit, and say what a cell means.
Fill in a consistent direction, and do not scatter cells for visual interest.
Limit to four or five categories; beyond that the grid becomes confetti.
Build this chart in React
Compare with
Use for a compact ring with contextual content in the centre.
Use when angle-based slices suit a simple composition overview.
Graphy Chart SDK
Add Graphy’s waffle charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.