Waffle Chart

Part-to-whole grid of coloured cells, each segment taking cells in proportion to its value.

npm install @plocks/charts

Examples

Properties

Playground

Basics

Each segment gets cells in proportion to its value; together they fill a 10 by 10 grid.

Loading demo…

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

import { BROWSER_SHARE } from './data';

export function Demo() {
  return <WaffleChart title="Browser share" data={BROWSER_SHARE} maw={360} />;
}

Total

total sets the whole the values are measured against. A total larger than their sum leaves the remaining cells empty.

Loading demo…

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

export function Demo() {
  return (
    <WaffleChart
      title="Migration progress"
      data={[
        { name: 'Migrated', value: 412 },
        { name: 'In review', value: 96 },
      ]}
      total={800}
      maw={360}
    />
  );
}

Hovering or pressing a cell shows its segment. tooltip.formatter receives the segment with its count of cells and percentage.

Loading demo…

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

import { BROWSER_SHARE } from './data';

export function Demo() {
  return (
    <WaffleChart
      data={BROWSER_SHARE}
      tooltip={{ formatter: (segment) => `${segment.name}: ${segment.value}% (${segment.count} cells)` }}
      maw={360}
    />
  );
}

Legend

The legend sits below the grid by default. legend.position moves it to top, left or right; legend={{ show: false }} hides it.

Loading demo…

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

import { BROWSER_SHARE } from './data';

export function Demo() {
  return <WaffleChart data={BROWSER_SHARE} legend={{ position: 'right' }} maw={480} />;
}

Grid size and gap

rows and columns shape the grid, gap spaces the cells and cellRadius rounds them. Cells size themselves to the width available.

Loading demo…

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

import { BROWSER_SHARE } from './data';

export function Demo() {
  return <WaffleChart data={BROWSER_SHARE} rows={5} columns={20} gap={2} cellRadius={6} maw={480} />;
}

Fill direction

fillDirection sets the order cells are filled: bottom-to-top (the default) and top-to-bottom fill column by column, left-to-right and right-to-left row by row.

Loading demo…

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

import { BROWSER_SHARE } from './data';

export function Demo() {
  return <WaffleChart data={BROWSER_SHARE} fillDirection="left-to-right" maw={360} />;
}

Empty cells color

emptyColor paints the cells no segment claims.

Loading demo…

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

export function Demo() {
  return (
    <WaffleChart
      data={[{ name: 'Completed', value: 68, color: '#1baf7a' }]}
      total={100}
      emptyColor="#E2E8F0"
      maw={360}
    />
  );
}

Scan to open this page on your phoneplocks.dev/charts/WaffleChart

Related charts

Pie Chart

Donut Chart

Waffle Chart

Basics

Total

Tooltip

Legend

Grid size and gap

Fill direction

Empty cells color

Related charts

Further reading