WaffleChart

Usage

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.

import { WaffleChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <WaffleChart data={data} />;
}

Total

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, for example to display progress towards a goal. Values smaller than the sum of the data are ignored.

Tooltip

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:

import { WaffleChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <WaffleChart
      data={data}
      withTooltip
      getTooltipLabel={(cell) => `${cell.name}: ${cell.value}%`}
    />
  );
}

Legend

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:

import { WaffleChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <WaffleChart data={data}  />;
}

Gap and grid size

Use rows and columns props to change the number of cells in the grid (10 × 10 by default), gap to change the distance between them and cellRadius to change their border radius. Set size to control the width of the chart.

import { WaffleChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <WaffleChart data={data}  />;
}

Fill direction

fillDirection controls the order in which cells are filled:

import { WaffleChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <WaffleChart data={data}  />;
}

Empty cells color

Use emptyColor prop to change the color of cells that are not allocated to any segment:

import { WaffleChart } from '@mantine/charts';

function Demo() {
  return (
    <WaffleChart
      data={[{ name: 'Completed', value: 68, color: 'teal' }]}
      total={100}
      emptyColor="gray.3"
    />
  );
}

Accessibility

The grid is exposed to screen readers as a single image labelled with every segment name and value. Set aria-label or aria-labelledby to describe what the values represent, your label is announced together with the generated data summary.