React Treemap Chart

A treemap shows how a whole splits into parts, and makes the large parts stand out. Each value is a rectangle, with an area proportional to the value.

In AdminKit for React, the ApexChart component draws it with ApexCharts. Chart setup describes the component.

ExampleCopy Anchor Link

import { ApexChart } from "@/components/plugins/apexcharts";

const cities = [
  { x: "New Delhi", y: 218 },
  { x: "Kolkata", y: 149 },
  { x: "Mumbai", y: 184 },
  { x: "Ahmedabad", y: 55 },
  { x: "Bengaluru", y: 84 },
  { x: "Pune", y: 31 },
  { x: "Chennai", y: 70 },
  { x: "Jaipur", y: 30 },
  { x: "Surat", y: 44 },
  { x: "Hyderabad", y: 68 },
  { x: "Lucknow", y: 28 },
  { x: "Indore", y: 19 },
  { x: "Kanpur", y: 29 },
];

export function CitiesTreemap() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          series: [{ data: cities }],
          legend: { show: false },
          chart: { height: 350, type: "treemap" },
          title: { text: "Basic Treemap" },
        })}
      />
    </div>
  );
}

The rectangles are in the primary color, the first default color of the wrapper, in lighter and darker shades by value.

PropsCopy Anchor Link

Data and colorsCopy Anchor Link

Each rectangle is { x, y }: x is its label and y its value, which sets its area.

plotOptions.treemap sets the colors:

• distributed: true gives each rectangle the next color of colors instead of shades of one color.
• enableShades: false turns the shades off, so all rectangles of a series have the same color.
• With several series, each series is a group of rectangles in its own color. Then legend.show can stay on to name the groups.

<ApexChart
  options={(theme) => ({
    series: [{ data: cities }],
    legend: { show: false },
    chart: { height: 350, type: "treemap" },
    colors: [
      theme.primary,
      theme.success,
      theme.warning,
      theme.danger,
      theme.info,
    ],
    plotOptions: { treemap: { distributed: true, enableShades: false } },
  })}
/>

AccessibilityCopy Anchor Link

• Each rectangle shows its label as a data label, so you can read it without the tooltip. Small rectangles may be too small for it. The exact values show in the tooltip on hover only, so give them in a table too when they matter.
• Area is hard to compare by eye. Sort the same data in a list or table when the ranking matters.
• role="figure" and an aria-label on ApexChart name the chart: other props go to its <div>.

RelatedCopy Anchor Link

• Next.js treemap chart: the same chart in AdminKit for Next.js
• Bootstrap 5 treemap chart: the ApexCharts example of the HTML version
• Chart setup: the ApexChart, ChartJs and VectorMap components
• React heatmap chart: values as colors in a grid
• ApexCharts demo: the line, area, bar, column, pie, heatmap, mixed and candlestick charts of the demo