# Next.js Treemap Chart

A Next.js treemap chart for the App Router: an ApexCharts client component in AdminKit PRO that sizes a rectangle per value, with theme colors.

> This component is only available in **AdminKit PRO**. [Learn more](/pricing/#nextjs).

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](/nextjs/) you draw it with `ApexChart`, a client component that wraps [ApexCharts](https://apexcharts.com/). See [Chart setup](/nextjs/docs/charts/overview/#apexcharts) 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.

## Example

```html
<div id="apexcharts-treemap"></div>

<script>
var options = {
  series: [{
    data: [
      { 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 }
    ]
  }],
  legend: {
    show: false
  },
  chart: {
    height: 350,
    type: "treemap"
  },
  title: {
    text: "Basic Treemap"
  }
};

adminkit.apexcharts("#apexcharts-treemap", function () {
  return options;
});
</script>
```
```tsx code title="src/components/cities-treemap.tsx"
"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.

```tsx title="src/app/(dashboard)/cities/page.tsx"
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.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `(theme: Theme) => ApexOptions` | | The ApexCharts options, with `series` and `chart.type`. Called again with the new colors when the color mode changes |

## Data and colors

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.

| `plotOptions.treemap` | Effect |
| --- | --- |
| `distributed: true` | Each tile takes the next color of `colors` |
| `enableShades: false` | No lighter and darker shades by value |

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

## Accessibility

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

## Related

- [React treemap chart](/react/docs/charts/treemap-chart/): the same chart in AdminKit for React (Vite)
- [Bootstrap 5 treemap chart](/bootstrap/docs/charts/treemap-chart/): the ApexCharts example of the HTML version
- [Chart setup](/nextjs/docs/charts/overview/): the `ApexChart`, `ChartJs` and `VectorMap` client components
- [Next.js heatmap chart](/nextjs/docs/charts/heatmap-chart/): values as colors in a grid
- [ApexCharts demo](https://nextjs-demo.adminkit.io/charts-apexcharts): the line, area, bar, column, pie, heatmap, mixed and candlestick charts of the demo

---

Canonical HTML page: https://adminkit.io/nextjs/docs/charts/treemap-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io