Treemap | Mantine

Usage

Treemap is based on the Treemap recharts component. It displays hierarchical data as a set of nested rectangles:

import { Treemap } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <Treemap data={data} />;
}

Nested data

Treemap supports nested data – each data item can have a children array. The color property on a parent node is used for all its children:

import { Treemap } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <Treemap data={data} />;
}

Node color

You can reference colors from theme the same way as in other components, for example, blue, red.5, orange.7, etc. Any valid CSS color value is also accepted.

import { Treemap } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <Treemap data={data} />;
}

autoContrast

Treemap supports autoContrast prop that automatically adjusts text color based on the background color of each node to ensure readable labels:

import { Treemap } from '@mantine/charts';

const data = [
  { name: 'USA', value: 400, color: 'indigo.0' },
  { name: 'India', value: 300, color: 'yellow.1' },
  { name: 'Japan', value: 100, color: 'teal.1' },
  { name: 'Other', value: 200, color: 'gray.2' },
];

function Demo() {
  return <Treemap data={data} autoContrast />;
}

Node stroke

Use the strokeWidth prop to control the width of the stroke around each node. To change the color of the stroke, use the strokeColor prop:

import { Treemap } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <Treemap data={data} strokeColor="gray.3" strokeWidth={2} />;
}

Disable tooltip

To disable the tooltip, set withTooltip={false}:

import { Treemap } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <Treemap data={data} withTooltip={false} />;
}

BarsList

Getting started