Tree Map

This page describes how to set up and configure the Treemap component.

Treemaps are particularly useful for visualizing large amounts of data in a compact space. For example, they can be used to visualize financial data, such as the market share of different companies within an industry.

Tree Maps are best used in conjunction with Pivot Queries. The screenshot below is an example of a treemap.

This section provides information on the following:

• How to set up a treemap

• Basic properties

• Column data

• Color palette

• Node properties

• Tooltip

• Group by option

• Animation

• File export

• Style

• Format

• Margins

Set up a Tree Map

To set up a Treemap component, click and drag the component into the workspace and configure the following:

1. Click to populate Data Source or define a Data Source from the Basics properties. Click New and proceed with configuring the Data Source.

2. Assign Category and box size from the data source with Column and Size.

3. From the Color Palette, choose a color format. Options go from single color, color gradient to iterative.

   Note

   In a treemap, data is grouped in nodes/boxes, and each node/box represents a part of the dataset.

Refer to Treemap properties described in the next section for details on additional properties.

Treemap properties

The following sections provides details on how to configure the properties of the Treemap component.

Basics

Open the Basics properties on the right and configure the properties described in the following table.

property	description
Name	Enter a name for the component.
Data Source	Set up a data source.
Focus	Select a View State Parameter for linking components.
Selected Value	Set a View State Parameter to store the last (most recent) selected interaction.

Action

Actions are a common property set used to configure a view state, run a query, or open an URL. For more information on how to configure these, see Actions.

Data

Open the Data properties to configure your columns by setting the properties described in the table below.

property	description
Column	Sets the Data source variable for node labels. This defines how node are categorized into groups. Set to {breakdownId} for Pivot queries.
Name	The title name for Column. Set this to {breakdownId} for Pivot queries.
Size	The Data source variable used for scaling the node size. This represents the numeric values that determine the size of each node in the treemap. The size of each node is proportional to its value.
Color	The Data source variable used to define color shading. This represents the numeric values that can determine the color of each node in the treemap.

Highlight rules

Expand the Highlight Rules property, add a rule and expand it to set the following properties.

property	description
Opacity	Strength of highlight rule color, where 0 is transparent (retaining underlying treemap color palette), 100 is opaque, and 50 offers a hybrid shading of half Background Color and half of the base treemap color palette.
Inverse	Inverse application of color palette and highlight color.

For more information and the description of the remaining properties in this section, see Highlight Rules.

Color palette

From the Color Palette property, select the color options for your treemap. Define the properties as described in the table below.

Property	Description
Coloring	Select from: Fixed: This option uses a single, static color for all elements. It’s useful when you want a uniform look without any variation. Iterative: This assigns different colors to each element in a sequence. For example, if you have multiple categories, each one gets a distinct color from a predefined palette. Iterative Children: Similar to iterative, but it applies the colors to child elements within a parent category. This is helpful for visualizing hierarchical data where you want to distinguish subcategories. Scaled: This option uses a range of colors based on the values of the data. Higher values might be one color and lower values another, with a gradient in between. For example, you can use it for showing intensity or magnitude. Gradient: This applies a smooth transition between two or more colors across the data range. It’s useful for showing gradual changes in data values. Gradient Percentage: This is a specific type of gradient that maps colors to percentage values, typically between 0 and 100%. It’s often used for progress indicators or performance metrics. Note Gradient Percentage requires a Size range of between 0 and 1.
Fixed Color	This is used when Coloring is set to Fixed.
Selected Color	The color of the Treemap area on click-selection.
Hover Color	The color of the Treemap area on mouse hover.
Palette Theme	See Palette Theme for more information.

Color Scheme

For more information on the Color Scheme, see Palettes.

Node

In a treemap, a node represents a rectangle that visualizes a specific category or subcategory within the hierarchical structure of the data. The table below describes the properties you can set for a node.

property	description
Show Label	When checked, it displays the Treemap data labels.
Format	General: Displays the data as it is; no specific formatting. Number: Used for numerical data. Smart Number: Automatically adjusts the display of numbers based on their size. Formatted Number: Advanced formatting for numbers, like adding prefixes or suffixes (currency, symbols), controlling decimal places, and applying custom number formats. Datetime: Used for date and time data.
Label Color	Set the font color for the label.
Date/Time Format	Use when Datetime is selected for Format.
Hide Trailing Zeros	Remove extra zeros at the end of a digit.
Precision	The number of decimal places used when Format is set to:Number, Smart Number or Formatted Number.
Suffix / Prefix	Add a symbol before or after Node label.
Custom Label	Add a custom label for additional information displayed on Treemap.   For example: Sample configuration:
Min Value / Max Value	Defined from Size value range.
Show Legend	This is a toggle display of gradient or Name legend.
Border Color / Border Width / Gap Width	Set pixel width and color of border.
Show Node Header / Header Font Color / Header Height / Header Font Size	Display Name as header and define Header style.
Show Color Scale Index	Display the color scale index text.
Scale Node Size	When enabled, nodes are scaled by Size variable.

Tooltip

Tooltips show data values associated with the cursor position. For common settings and more information on how to define a Tooltip, see Template.

Group by

Define the following properties.

property	description
Use Group By / Group By	Select the Data Source column to group Data.
Show Group By Header	Displays group header name (from Data Source).
Scale By Children	Scale Node by Group By variable.

Animation

Expand Animation and define the following properties.

property	description
Duration	Set duration in milliseconds to change Treemap animation.
Animation Effect	Select animation from: easeInQuad, easeOutQuad, easeInOutQuad easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, and easeInOutBounce.

File export

You can export display values as CSV files, XLS files, or image snapshots. Check the options described below to show the export buttons.

selection	export
Show Export CSV Button	Export display values as CSV file.
Show Export Excel Button	Export display values as an XLS file.
Show Screenshot Button	Take an image snapshot (.png) of your treemap.

You can also set the following properties:

property	description
Filename	Includes variable as part of file save name.
Filename Part	A filename for the exported file, or a View State Parameter which can be linked to a Text Input for user defined file names.

Style

For common settings, see Style and Template.

Format

See the Format on the Style page for common settings.

Margins

Refer to Margins on the Style page for common settings.

Further Reading

• Navigate Dashboards workspace

• Configure data source connections

• Use view states

• Publish & Export a dashboard