Part-to-whole grid chart with colored cells
WaffleChart displays parts of a whole as a grid of colored cells. Each segment of the data array is allocated a number of cells proportional to its value , which makes proportions easier to compare than in a pie or donut chart.
Unlike most charts in @mantine/charts , WaffleChart does not use recharts – the grid is rendered as a plain svg element.
By default, the sum of all value fields is treated as 100% and the entire grid is filled. Set total to a larger number to leave the remaining cells empty – this is useful to display progress towards a goal. Values smaller than the sum of the data are ignored.
Set withTooltip to display a tooltip when a cell is hovered. Use getTooltipLabel to customize its content – the function receives the segment and the number of cells allocated to it:
Legend is displayed at the bottom of the chart by default. Use legendPosition to move it to the top , left or right side, or set withLegend={false} to hide it:
rows and columns control the number of cells in the grid (10 × 10 by default), gap controls the distance between them and cellRadius the border radius of each cell. Set size to control the width of the chart – if it is not set, the width is calculated from the number of columns.
fillDirection controls the order in which cells are filled:
Cells that are not allocated to any segment use --waffle-empty-color – set the emptyColor prop to change it:
The grid is exposed to screen readers as a single image labelled with every segment name and value, so the data is available whether or not the legend is displayed. The legend itself is aria-hidden because it repeats those names visually.
Set aria-label (or aria-labelledby ) to describe what the values represent. The chart root then becomes a labelled group – a plain div cannot carry an accessible name – and your label is announced alongside the generated data summary rather than replacing it.