> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Treemap

> Examples and usage of Treemap component

The `Treemap` component visualizes hierarchical data using nested rectangles. The size of each rectangle represents a quantitative value, making it ideal for showing proportions within a hierarchy.

## Basic treemap

```jsx theme={null}
import { Treemap, Tooltip } from 'recharts';

const data = [
  {
    name: 'Group A',
    value: 2400,
    children: [
      { name: 'A1', value: 1000 },
      { name: 'A2', value: 800 },
      { name: 'A3', value: 600 },
    ],
  },
  {
    name: 'Group B',
    value: 1800,
    children: [
      { name: 'B1', value: 900 },
      { name: 'B2', value: 900 },
    ],
  },
  {
    name: 'Group C',
    value: 1200,
    children: [
      { name: 'C1', value: 400 },
      { name: 'C2', value: 400 },
      { name: 'C3', value: 400 },
    ],
  },
];

function Example() {
  return (
    <Treemap
      width={600}
      height={400}
      data={data}
      dataKey="value"
      aspectRatio={4 / 3}
      stroke="#fff"
      fill="#8884d8"
    >
      <Tooltip />
    </Treemap>
  );
}
```

## Flat treemap

```jsx theme={null}
<Treemap
  width={600}
  height={400}
  data={data}
  dataKey="value"
  nameKey="name"
  type="flat"
  aspectRatio={4 / 3}
  stroke="#fff"
  fill="#8884d8"
/>
```

<Note>
  `type="flat"` displays all nodes at once. This is the default type.
</Note>

## Nested (interactive) treemap

```jsx theme={null}
<Treemap
  width={600}
  height={400}
  data={data}
  dataKey="value"
  nameKey="name"
  type="nest"
  aspectRatio={4 / 3}
  stroke="#fff"
  fill="#8884d8"
/>
```

<Note>
  `type="nest"` creates an interactive treemap where clicking on a parent node zooms into its children, with breadcrumb navigation.
</Note>

## Custom colors

```jsx theme={null}
const dataWithColors = [
  {
    name: 'Group A',
    children: [
      { name: 'A1', value: 1000, fill: '#8884d8' },
      { name: 'A2', value: 800, fill: '#83a6ed' },
      { name: 'A3', value: 600, fill: '#8dd1e1' },
    ],
  },
  {
    name: 'Group B',
    children: [
      { name: 'B1', value: 900, fill: '#82ca9d' },
      { name: 'B2', value: 900, fill: '#a4de6c' },
    ],
  },
];

<Treemap
  width={600}
  height={400}
  data={dataWithColors}
  dataKey="value"
  stroke="#fff"
/>
```

## Custom aspect ratio

```jsx theme={null}
<Treemap
  width={600}
  height={400}
  data={data}
  dataKey="value"
  aspectRatio={1}
  stroke="#fff"
  fill="#8884d8"
/>
```

<Note>
  The `aspectRatio` prop controls the shape of rectangles. Lower values create more square-like rectangles. Default is the golden ratio (≈1.618).
</Note>

## Custom content renderer

```jsx theme={null}
import { Rectangle } from 'recharts';

const CustomContent = (props) => {
  const { x, y, width, height, index, name, value } = props;
  const colors = ['#8884d8', '#83a6ed', '#8dd1e1', '#82ca9d', '#a4de6c'];
  
  return (
    <g>
      <Rectangle
        x={x}
        y={y}
        width={width}
        height={height}
        fill={colors[index % colors.length]}
        stroke="#fff"
        strokeWidth={2}
      />
      {width > 40 && height > 20 && (
        <text
          x={x + width / 2}
          y={y + height / 2}
          textAnchor="middle"
          fill="#fff"
          fontSize={14}
        >
          {name}
        </text>
      )}
    </g>
  );
};

<Treemap
  width={600}
  height={400}
  data={data}
  dataKey="value"
  content={<CustomContent />}
/>
```

## Color panel

```jsx theme={null}
const COLORS = ['#8884d8', '#83a6ed', '#8dd1e1', '#82ca9d', '#a4de6c', '#d0ed57', '#ffc658'];

<Treemap
  width={600}
  height={400}
  data={data}
  dataKey="value"
  colorPanel={COLORS}
  stroke="#fff"
/>
```

## Custom name and value keys

```jsx theme={null}
const customData = [
  {
    label: 'Group A',
    size: 2400,
    children: [
      { label: 'A1', size: 1000 },
      { label: 'A2', size: 800 },
    ],
  },
];

<Treemap
  width={600}
  height={400}
  data={customData}
  dataKey="size"
  nameKey="label"
  stroke="#fff"
  fill="#8884d8"
/>
```

## Event handlers

```jsx theme={null}
import { useState } from 'react';

function Example() {
  const [activeNode, setActiveNode] = useState(null);

  return (
    <Treemap
      width={600}
      height={400}
      data={data}
      dataKey="value"
      stroke="#fff"
      fill="#8884d8"
      onMouseEnter={(node) => setActiveNode(node.name)}
      onMouseLeave={() => setActiveNode(null)}
      onClick={(node) => console.log('Clicked:', node.name)}
    >
      <Tooltip />
    </Treemap>
  );
}
```

## Animations

```jsx theme={null}
<Treemap
  width={600}
  height={400}
  data={data}
  dataKey="value"
  isAnimationActive={true}
  animationDuration={1500}
  animationEasing="ease-in-out"
  animationBegin={0}
  stroke="#fff"
  fill="#8884d8"
/>
```

## Common pitfalls

* **Data structure**: Each parent node must have a `children` array. Leaf nodes should have a value specified by `dataKey`.
* **Automatic values**: Parent node values are automatically calculated from children. Don't manually specify values for parent nodes.
* **Name key**: Use `nameKey` prop to specify which field contains the display name. Defaults to `'name'`.
* **Responsive sizing**: Unlike most charts, Treemap doesn't work well with `responsive` mode due to internal dimension calculations. Use fixed `width` and `height`.
* **Tooltip event type**: Treemap only supports `'item'` tooltip event type.
* **Deep hierarchies**: For deeply nested data, consider using `type="nest"` to allow users to explore incrementally.