# TreemapChart

Part of a whole, when the whole has too many parts for a pie — and the parts nest.

- Group: Charts
- Import: `import { TreemapChart } from '@misoto22/design/charts'`
- Page: https://ui.misoto22.com/components/treemap-chart/
- Related: pie-chart, bar-chart

## When to reach for it

Fifty items where a pie fails at six. Under a dozen items with a ranking to read, a BarChart’s length is the more precise encoding.

## Accessibility

- title is required. The table view lists the LEAVES with the path that names them: a nested tree read row by row is not something anyone can follow.
- Area is the encoding, so the data must be non-negative and must sum to something the reader recognises as the whole.
- The gap between tiles is a surface-coloured stroke rather than a smaller rect — a treemap whose parts do not touch stops reading as a partition.

## TreemapChart

Part of a whole, when the whole has too many parts for a pie — and the parts nest. A treemap encodes value as AREA, which the eye reads worse than length but far better than angle, and it is the only form here that stays readable at fifty items. Two rules make it honest: no negative values (an area cannot be negative), and the tiles have to sum to something a reader recognises as the whole. Reach for `<BarChart>` when there are under a dozen items and the ranking matters — a bar's length is the more precise encoding, and a treemap's layout deliberately does not order its tiles by value alone.

### Props

- `config` — `ChartConfig` default `{}`. Tile names → their label and paint. Optional: the ramp covers unnamed tiles.
- `data` (required) — `TreemapNode[]`. The tree. One level is a flat set of tiles; two is a nested treemap.
- `title` (required) — `string`. What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed.
- `showTitle` — `boolean`. Prints the title above the plot instead of hiding it from sight.
- `description` — `ReactNode`. A line under the title — the unit, the window, the caveat.
- `className` — `string`. Merged onto the figure, last, so a call site can size or space it.
- `variant` — `TreemapVariant` default `'ramp'`.
- `dataKey` — `string` default `'size'`. The leaf field holding each tile's number.
- `aspectRatio` — `number` default `4 / 3`. How square the tiles are pushed to be. Recharts' own squarify parameter.
- `showLabels` — `boolean` default `true`. Prints each tile's name on it, where the tile is big enough to hold it.
- `children` — `ReactNode`. The hover panel.
- `chartProps` — `TreemapExtras`.
- `hideDataTable` — `boolean` default `false`. Drops the hidden table view. Only correct when the page prints the data itself.

## Example — default

```tsx
import { TreemapChart } from '@misoto22/design/charts'

<TreemapChart title="Bundle size by package" data={packages} showLabels>
  <TreemapChart.Tooltip />
</TreemapChart>
```

## Example — nested

```tsx
import { ToggleGroup, ToggleGroupItem } from '@misoto22/design'
import { TreemapChart, type TreemapVariant } from '@misoto22/design/charts'

<div className="flex w-full flex-col gap-4">
  <ToggleGroup
    type="single"
    value={variant}
    onValueChange={(next) => next && setVariant(next as TreemapVariant)}
    aria-label="Tile fill"
  >
    {VARIANTS.map((option) => (
      <ToggleGroupItem key={option} value={option}>
        {option}
      </ToggleGroupItem>
    ))}
  </ToggleGroup>

  <TreemapChart
    title={`Bundle size by group — ${variant}`}
    data={tree}
    variant={variant}
    showLabels
  >
    <TreemapChart.Tooltip />
  </TreemapChart>
</div>
```