WaffleChart

Proportions as a grid of cells (10 x 10 by default, so one cell is 1%). Cells are shared with the largest remainder method, so they always add up. Hovering, focusing a legend item or moving with the arrows highlights one category; hidden categories leave their cells empty.

Import

import { WaffleChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/waffle-chart.

Usage

<WaffleChart
  title="Pagos del mes por medio"
  data={paymentMethods}
  rows={10}
  columns={10}
  cellShape="rounded"
  order="row"
  gap={0.14}
  height={260}
  valueFormat="integer"
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
title *	string
description	string
data *	readonly Omit<UnitCategory, "icon">[]
rows	number	10
columns	number	10
total	number		What the whole grid stands for. By default the categories fill every cell; with a larger total the rest stays empty (62 of 100 chairs).
cellShape	"circle" | "square" | "rounded"	"rounded"
order	"row" | "column"	"row"	“row”: left to right from the top; “column”: bottom to top from the left.
gap	number	0.14	Gap between cells, as a fraction of the cell size.
height	number | "fill"	260
aspectRatio	number		Width / height ratio; sizes the drawing from the container width when height is not “fill”.
valueFormat	ValueFormat	"integer"
legend	boolean | "top" | "bottom"	true
tooltip	boolean	true
animate	boolean	true
loading	boolean	false
initialHidden	readonly string[]
labels	Partial<ChartLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Squares
• Circles
• Part of a total (occupancy)
• Wide grid (5 x 20)
• Small Multiples
• Small Multiples Narrow
• Loading
• Empty
• Narrow

Source

packages/ui/src/charts/waffle-chart/waffle-chart.tsx