# TreemapChart

> Squarified treemap: areas proportional to value, nested groups with a header band, click a group to open it (breadcrumb to go back).

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

Squarified treemap: areas proportional to value, nested groups with a
header band, click a group to open it (breadcrumb to go back). Each branch
wears one palette hue; its children are spread over lighter and darker
tints of it. Labels only show where they fit.

## Import

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

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

## Usage

```tsx
<TreemapChart
  title="Ventas por categoría y producto"
  data={salesByCategory}
  valueFormat="currency"
  height={380}
  depth={2}
  drillDown
  breadcrumb
  legend
  tooltip
  gap={3}
  radius={6}
  sort
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the drawing and caption of the data table. |
| `data` * | `HierarchyDatum` |  | Root of the tree; its name is the first breadcrumb item. |
| `height` | `number \| "fill"` | `360` | Height of the drawing in pixels. |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `valueFormat` | `ValueFormat` |  |  |
| `depth` | `number` | `2` | Levels drawn at once below the open node; deeper ones appear after drilling. |
| `drillDown` | `boolean` | `true` | Click (or Enter) on a group opens it. |
| `breadcrumb` | `boolean` | `true` | Path of the open node above the drawing. |
| `legend` | `boolean` | `true` | Read-only legend of the open level's branches. |
| `tooltip` | `boolean` | `true` |  |
| `gap` | `number` | `3` | Gap between cells in pixels. |
| `radius` | `number` | `6` | Corner radius of the cells. |
| `sort` | `boolean` | `true` | Largest first (default) or data order. |
| `animate` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<HierarchyLabels>` |  |  |
| `onFocusChange` | `((node: HierarchyNode) => void)` |  | Called with the open node after drilling in or out. |
| `onNodeClick` | `((node: HierarchyNode) => void)` |  | Click on a cell that cannot be opened (a leaf). |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-treemapchart--default)
- [Top Level](/storybook/?path=/story/charts-treemapchart--top-level)
- [Nested](/storybook/?path=/story/charts-treemapchart--nested)
- [Drilldown](/storybook/?path=/story/charts-treemapchart--drilldown)
- [Data Order](/storybook/?path=/story/charts-treemapchart--data-order)
- [Without Legend](/storybook/?path=/story/charts-treemapchart--without-legend)
- [Loading](/storybook/?path=/story/charts-treemapchart--loading)
- [Empty](/storybook/?path=/story/charts-treemapchart--empty)
- [Narrow](/storybook/?path=/story/charts-treemapchart--narrow)

## Source

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