Next.js Treemap Chart

A treemap shows which parts take up most of a whole. It divides a rectangle into tiles, one per value, and each tile's area is proportional to its value. In AdminKit for Next.js you draw it with ApexChart, a client component that wraps ApexCharts. See Chart setup for the component.

The tiles are only drawn in the browser, while your page is a server component that renders on the server. Write the chart as a client component file and render it from the page.

ExampleCopy Anchor Link

"use client";

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

type City = { x: string; y: number };

export function CitiesTreemap({ cities }: { cities: City[] }) {
  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>
  );
}

Here the page owns the data and passes it as a prop. An array of plain objects can cross from a server component to a client component. The options function cannot, so it stays in the client file.

import { CitiesTreemap } from "@/components/cities-treemap";
import { pageMetadata } from "@/lib/site";

export const metadata = pageMetadata("/cities");

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 default function CitiesPage() {
  return (
    <div className="card">
      <div className="card-body">
        <CitiesTreemap cities={cities} />
      </div>
    </div>
  );
}

List /cities in src/data/pages.json, where pageMetadata() reads its title and description. With the static export, the page runs at build time, so the data is the data of the last build.

PropsCopy Anchor Link

Data and colorsCopy Anchor Link

Each tile is { x, y }: the label and the value that sets its area. With one series, the tiles are shades of the primary color, the wrapper's first default color.

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 } },
})}

Several series make groups of tiles, each in its own color. Turn the legend on to name the groups.

AccessibilityCopy Anchor Link

• Tiles show their label in the chart, but small tiles may not have room for it, and the value shows in the tooltip on hover only. Give the values in a table where they matter.
• Areas are hard to compare by eye: when the ranking matters, also show a sorted list.
• Name the chart with role="figure" and aria-label on ApexChart. Other props go to its <div>.

RelatedCopy Anchor Link

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