> ## 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

> API reference for the Treemap component

Treemap is used to visualize hierarchical data using nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches.

```tsx theme={null}
import { Treemap } from 'recharts';

const data = [
  {
    name: 'axis',
    children: [
      { name: 'Axes', value: 1302 },
      { name: 'Axis', value: 24593 },
    ],
  },
  {
    name: 'controls',
    children: [
      { name: 'AnchorControl', value: 2138 },
      { name: 'ClickControl', value: 3824 },
    ],
  },
];

<Treemap
  width={400}
  height={200}
  data={data}
  dataKey="value"
  aspectRatio={4 / 3}
  stroke="#fff"
  fill="#8884d8"
/>
```

## Props

<ParamField path="data" type="array" required>
  The source data. Each element should be an object. If the `children` property is present on an element, it will be treated as a nested treemap.
</ParamField>

<ParamField path="width" type="number | string">
  The width of chart container. Can be a number or a percent string like "100%".
</ParamField>

<ParamField path="height" type="number | string">
  The height of chart container. Can be a number or a percent string like "100%".
</ParamField>

<ParamField path="dataKey" type="string | number | function" default="'value'">
  Decides how to extract value from the data. Can be a string key name, number index, or function that receives the data object and returns the value.
</ParamField>

<ParamField path="nameKey" type="string | number | function" default="'name'">
  Name represents each sector in the tooltip. Can be a string key name, number index, or function that receives the data object and returns the name.
</ParamField>

<ParamField path="aspectRatio" type="number" default="0.5 * (1 + Math.sqrt(5))">
  The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given.
</ParamField>

<ParamField path="type" type="'flat' | 'nest'" default="'flat'">
  The type of treemap to render.

  * `flat`: Renders the entire treemap at once, with all leaf nodes visible.
  * `nest`: Renders an interactive, nested treemap. Clicking on a parent node will zoom in to show its children.
</ParamField>

<ParamField path="content" type="ReactElement | function">
  If set to a React element, the option is the customized React element of rendering the content. If set to a function, the function will be called to render the content.
</ParamField>

<ParamField path="fill" type="string">
  The fill color of treemap nodes.
</ParamField>

<ParamField path="stroke" type="string">
  The stroke color of treemap nodes.
</ParamField>

<ParamField path="colorPanel" type="array">
  Array of colors to use for the treemap nodes.
</ParamField>

<ParamField path="nestIndexContent" type="ReactElement | function">
  Customize nest index content for the breadcrumb navigation in nested treemaps.
</ParamField>

<ParamField path="isAnimationActive" type="boolean | 'auto'" default="'auto'">
  If set false, animation of treemap will be disabled. If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
</ParamField>

<ParamField path="isUpdateAnimationActive" type="boolean | 'auto'">
  If set false, animation of treemap will be disabled when data changes.
</ParamField>

<ParamField path="animationBegin" type="number" default="0">
  Specifies when the animation should begin, the unit of this option is ms.
</ParamField>

<ParamField path="animationDuration" type="number" default="1500">
  Specifies the duration of animation, the unit of this option is ms.
</ParamField>

<ParamField path="animationEasing" type="string" default="'linear'">
  The type of easing function.
</ParamField>

<ParamField path="onAnimationStart" type="function">
  The customized event handler of animation start.
</ParamField>

<ParamField path="onAnimationEnd" type="function">
  The customized event handler of animation end.
</ParamField>

<ParamField path="onMouseEnter" type="function">
  The customized event handler of mouseenter on a node.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  The customized event handler of mouseleave on a node.
</ParamField>

<ParamField path="onClick" type="function">
  The customized event handler of click on a node.
</ParamField>

<ParamField path="className" type="string">
  CSS class name for the chart container.
</ParamField>

<ParamField path="style" type="CSSProperties">
  Inline CSS styles for the chart container.
</ParamField>

<ParamField path="id" type="string">
  The unique id of chart.
</ParamField>

<ParamField path="throttleDelay" type="number | 'raf'" default="'raf'">
  Decides the time interval to throttle events.
</ParamField>