---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-treemap
widgetname: Tree Map
description: "Visualize hierarchical data with a tree map chart widget for intuitive representation"
---

# Tree Map

:core-static-kpitreemap-lg:{style="font-size: 100px"}

## Overview

The Tree Map Chart Widget provides a mechanism to visualize a hierarchical data in a tree structure.

## General

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![Tree Map widget general settings page showing the toolbar and chart configuration area.](images/treemap_general.png)

## Style

{% include-markdown 'includes/pages/ui_widgets_style.md' %}

## Setup

In the **Setup** tab, the visual properties and the field names of the Widget are configured, namely:

* **Title** - The title of the Tree Map Chart.
* **Sub-Title** - The subtitle of the Tree Map Chart.
* **Use Auto-Generated Colors** - Ensures that any sections of the Tree Map without a defined color will have an automatically generated color assigned. This option is set to `false` by default.
* **Units** - Units to display in the tooltip.
* **Name Path** - The path that contains the names of each region in the Tree Map Chart.
* **Color Path** - The path that contains the color of each region in the Tree Map Chart.
* **Value Path** - The path that contains the value of each region in the Tree Map Chart, with the area of each visual element proportional to this value.

![Tree Map widget setup page showing the configuration fields for title, value, color, and naming paths.](images/treemap_setup.png)

## Links

Optionally, define the **Links** between this widget and other elements of the UI Page.

![Tree Map widget links configuration page showing how the widget connects to other UI page elements.](images/treemap_links.png)

By saving and closing the settings, the widget will be changed accordingly.

## Using the Fill Settings Feature

{% include-markdown 'includes/pages/fill_settings_ui_pages_widgets.md' %}

![Diagram showing a Tree Map with Xf Serre and Co FR scree labels, illustrating the step to configure fill settings](images/treemap_fill_settings.png)