Skip to content

Tree Map#

This page describes the configuration and use of 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.

Example of a treemap

This section provides information on the following:

Set up#

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

  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!!! "Note that in a treemap, data is grouped in nodes/boxes, and each node/box represents a part of the dataset."

  4. Additional properties can be configured, as they are described below.

Basics#

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

Basics properties

property description
Name Enter a name for the component.
Data Source 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.

Data properties

Adding more than one data series

The treemap will display nested rectangles, where each level of the hierarchy is represented by a larger rectangle containing smaller rectangles. This helps in visualizing the relationship between different data series.

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.

Screenshot

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

Screenshot

Nested Table Example
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 It's used when Fixed Coloring is selected.
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.

Node properties

Nested Table Example
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 Number of decimal places used for 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:
Screenshot
Sample configuration:
Screenshot
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.

Screenshot

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:

File name

Export file

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.