# React Treemap Chart

A React treemap chart with ApexCharts in AdminKit PRO: values as nested rectangles sized by value, drawn by the ApexChart component.

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

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](/react/), the `ApexChart` component draws it with [ApexCharts](https://apexcharts.com/). [Chart setup](/react/docs/charts/overview/#apexcharts) describes the component.

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

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

```tsx
<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 } },
  })}
/>
```

## Accessibility

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

## Related

- [Next.js treemap chart](/nextjs/docs/charts/treemap-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 treemap chart](/bootstrap/docs/charts/treemap-chart/): the ApexCharts example of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ApexChart`, `ChartJs` and `VectorMap` components
- [React heatmap chart](/react/docs/charts/heatmap-chart/): values as colors in a grid
- [ApexCharts demo](https://react-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/react/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