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

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

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

type="flat" displays all nodes at once. This is the default type.

Nested (interactive) treemap

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

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

Custom colors

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

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

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

Custom content renderer

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

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

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

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

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