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

![treemapIcon][treemapIcon]

## Overview

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

## General Steps

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

![treemap](images/treemap_general.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![treemap](images/treemap_style.png)

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

    ![treemapSetup][treemapSetup]

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

    ![treemapLinks][treemapLinks]

4. 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)

[treemapIcon]: images/treemap_icon.png
[treemapLinks]: images/treemap_links.png
[treemapSetup]: images/treemap_setup.png