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.

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

data · 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.

width · number | string

The width of chart container. Can be a number or a percent string like “100%”.

height · number | string

The height of chart container. Can be a number or a percent string like “100%”.

dataKey · 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.

nameKey · 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.

aspectRatio · number · default: "0.5 * (1 + Math.sqrt(5))"

The treemap will try to keep every single rectangle’s aspect ratio near the aspectRatio given.

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.

content · 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.

fill · string

The fill color of treemap nodes.

stroke · string

The stroke color of treemap nodes.

colorPanel · array

Array of colors to use for the treemap nodes.

nestIndexContent · ReactElement | function

Customize nest index content for the breadcrumb navigation in nested treemaps.

isAnimationActive · 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.

isUpdateAnimationActive · boolean | 'auto'

If set false, animation of treemap will be disabled when data changes.

animationBegin · number · default: "0"

Specifies when the animation should begin, the unit of this option is ms.

animationDuration · number · default: "1500"

Specifies the duration of animation, the unit of this option is ms.

animationEasing · string · default: "'linear'"

The type of easing function.

onAnimationStart · function

The customized event handler of animation start.

onAnimationEnd · function

The customized event handler of animation end.

onMouseEnter · function

The customized event handler of mouseenter on a node.

onMouseLeave · function

The customized event handler of mouseleave on a node.

onClick · function

The customized event handler of click on a node.

className · string

CSS class name for the chart container.

style · CSSProperties

Inline CSS styles for the chart container.

id · string

The unique id of chart.

throttleDelay · number | 'raf' · default: "'raf'"

Decides the time interval to throttle events.