---
title: "TreeMap"
description: "A space-filling hierarchical visualization where each branch of the tree is represented as a rectangle, sized and colored according to values."
group: Charts
tags: [Visualization, Chart, Dashboard, Hierarchical, TreeMap, Area, Space-Filling]
---
import { Aside, Steps } from '@astrojs/starlight/components';
# TreeMap
The **TreeMap Chart** displays hierarchical data using nested rectangles, where each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches.
The area of each rectangle is proportional to its value.
**Use cases:**
- Displaying **hierarchical data** with quantitative values.
- Visualizing **proportional relationships** within nested categories.
- Performing **drilldown exploration** using interactive breadcrumbs.
---
## ⚙️ Setup
1. Drag the **TreeMap Chart** widget from the chart library onto your designer workspace.
2. Select the chart.
3. Go to the [Widget Configuration](/insights-v8/guide-to-infoboard-designer/customize-panel/configure/) tab in the Configuration panel.
4. Under the Configuration panel tab, select the [Basic Configuration](/insights-v8/guide-to-infoboard-designer/customize-panel/configure/#basic) option to access essential settings for the TreeMap Chart.
5. Select the [Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources) from which the chart will fetch its data.
6. Map:
- **[Measure](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Numeric value determining the area size of each rectangle.
- **[Dimension](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Sequential categorical fields representing hierarchy levels. Minimum of **2** and maximum of **5** levels.
7. Optionally add a **Date** field for time-based filtering.
---
## 📊 Basic Configuration
| Configuration Item | Description |
|:---------------------|:-------------|
| **[Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources)** | The data source to query for chart values. |
| **[Measure](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Numeric value representing the size of each rectangle. |
| **[Dimension](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Categorical fields forming a hierarchy. Minimum 2, maximum 5 sequential levels. |
| **Date Field** (optional) | Enables date-based filtering and drilldown capability. |
---
## 🎨 Chart Customizations
| Category | Options & Description |
|:----------------------------|:-----------------------------------------------------------|
| **[General](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#general)** | Theme, background, interactivity, and accessibility options. |
| **[Title](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#title)** | Chart title, font, alignment, and visibility settings. |
| **[Sorting](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#sorting)** | Control the sorting order of nodes at each hierarchy level. |
| **[Grid](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#grid)** | Adjust chart margins and internal layout alignment. |
| **[HeatMap](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#heatmap)** | Apply color gradients to visualize measure intensities within rectangles. |
| **[Series](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#series-customization)** | Configure rectangle colors, borders, labels, label layouts, and value formatting. |
| **[Tooltip](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#tooltip)** | Tooltip content, value formatting, and triggers for displaying segment details. |
| **Others** | Customize **Breadcrumb navigation**, **Upper Labels**, **Zoom behavior**, **Leaf depth**, and **Color saturation range**. |
---
## 📊 Example Visualization
