We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Overview

The tree map control provides a simple and effective way to visualize flat or hierarchical data as clustered rectangles with a specific, weighted attribute determining the size of each rectangle.


Leaf node

The tree map contains groups of data collection; each group has one or more leaf nodes. Each leaf node is displayed as a rectangle, sized and colored according to values that you assign.

TreeMap


Levels

Any number of child items can be rendered for each individual node in the tree map and they are categorized to form levels.

TreeMap


Titles and subtitles

Titles and subtitles can be added to visualize additional information on the tree map. You can customize the font and alignment of the titles and subtitles.

TreeMap


Color mapping

Categorize the nodes by customizing their colors based on the underlying values.

TreeMap

Range color mapping

Colors can be applied to nodes by comparing their values with a desired numeric range. For example, colors can be applied to countries based on their population growth.

TreeMap

Equal color mapping

Equal color mapping is used to differentiate an item’s fill based on its underlying value and color. For example, colors can be applied to states based on a winning candidate.

TreeMap

Desaturation color mapping

Colors can be applied to nodes by comparing their values with desaturation color order. For example, transparent color can be applied to countries based on their population variation from higher to lower.


Data labels

Data labels are used to display more details about a particular item. Labels can be trimmed, hidden, or wrapped if the label width exceeds the item bounds.

TreeMap


Label template

The tree map control provides template support for the nodes, which allows any HTML element to be rendered as a label for the nodes in tree map.

TreeMap


Legend

A legend is used to add additional information for interpreting a tree map with various colors, shapes, or other identifiers.

TreeMap

Default

A default legend contains swatches of symbols with descriptions to denote the categories of items.

TreeMap

Interactive

An interactive legend is used to find the range of an underlying item’s value on mouse over.


Layout types

The current value can be pointed out by using a highly customizable needle-type element.

TreeMap

Squarified

The data is visualized in this layout in the form of square-like rectangles with best aspect ratio.

TreeMap

SliceAndDiceAuto

The data is visualized in this layout in the form of long, thin rectangles, which can be displayed either vertically or horizontally, with high aspect ratio.

TreeMap

SliceAndDiceHorizontal

This layout creates rectangles with high aspect ratio and displays them horizontally.

TreeMap

SliceAndDiceVertical

This layout creates rectangles with high aspect ratio and displays them sorted vertically.


Drill-down

Drill the parent items to have a more detailed look at their child items.


Tooltip

Displays details about item values in a tooltip when the mouse is hovered over the item.

TreeMap


Selection and highlighting

A particular item or group can be selected on mouse click or highlighted on mouse over to bring the center of attraction over items in the tree map.

TreeMap


Appearance

Customize the look and feel of a tree map by changing the fill color, background, border, and opacity of the items. Built-in palettes with customizable options are available by default.

TreeMap


Exporting

TreeMap

Export

Exports the tree map to a PDF document or in image formats such as SVG, PNG, and JPEG in client-side.

TreeMap

Print

Prints the rendered tree map directly from the browser.


45+ REACT COMPONENTS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.