# WaffleChart

> Proportions as a grid of cells (10 x 10 by default, so one cell is 1%).

Source: https://ui.jcsoftdev.com/docs/components/waffle-chart

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/charts-wafflechart--default)
- [Squares](/storybook/?path=/story/charts-wafflechart--squares)
- [Circles](/storybook/?path=/story/charts-wafflechart--circles)
- [Part of a total (occupancy)](/storybook/?path=/story/charts-wafflechart--part-of-total)
- [Wide grid (5 x 20)](/storybook/?path=/story/charts-wafflechart--wide)
- [Small Multiples](/storybook/?path=/story/charts-wafflechart--small-multiples)
- [Small Multiples Narrow](/storybook/?path=/story/charts-wafflechart--small-multiples-narrow)
- [Loading](/storybook/?path=/story/charts-wafflechart--loading)
- [Empty](/storybook/?path=/story/charts-wafflechart--empty)
- [Narrow](/storybook/?path=/story/charts-wafflechart--narrow)

## Source

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