Waffle Chart

10×10 grid where each square is 1% — a friendlier part-to-whole than a pie for a few categories.

Import

import { WaffleChart } from '@marbleui/ui'

Props

<WaffleChart>

Prop	Type	Default
data *required	`{ label: string; value: number; }[]`	`—`
summary *required	`string`	`—`
className	`string`	`—`
size	`number`	`18`
title	`string`	`—`

Usage notes

Part-to-whole on a 10×10 grid where each square is 1%, for a few categories. For a single segmented bar use CategoryBar; for a ring use DonutChart.

<WaffleChart
  title="Plan mix"
  summary="Free 58%, Pro 31%, Enterprise 11% of 4,120 workspaces."
  data={[{ label: 'Free', value: 2390 }, { label: 'Pro', value: 1277 }, { label: 'Enterprise', value: 453 }]}
/>

Shares are rounded to whole squares and the largest category absorbs the rounding, so the grid always fills. A category under 0.5% gets no square but stays in the legend at 0%.
Categories take --chart-1…8 in data order; the legend shows each label with its percentage.
size sets each square in pixels (default 18); the grid is always 10 columns wide.
The “Show data” table prints raw values unformatted, as there’s no format prop. If every value is zero (or data is empty) it draws 100 empty squares at 0%.

Example source · show

import { WaffleChart } from './waffle-chart'

export const styles = { Default: () => <WaffleChart title="Plan mix" summary="Free 58%, Pro 31%, Enterprise 11% of 4,120 workspaces." data={[{ label: 'Free', value: 2390 }, { label: 'Pro', value: 1277 }, { label: 'Enterprise', value: 453 }]} /> }

Source: packages/ui/src/waffle-chart/waffle-chart.tsx

Catalog