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.
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.
Any number of child items can be rendered for each individual node in the tree map and they are categorized to form levels.
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.
Categorize the nodes by customizing their colors based on the underlying values.
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.
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.
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 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.
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.
A legend is used to add additional information for interpreting a tree map with various colors, shapes, or other identifiers.
A default legend contains swatches of symbols with descriptions to denote the categories of items.
An interactive legend is used to find the range of an underlying item’s value on mouse over.
The current value can be pointed out by using a highly customizable needle-type element.
The data is visualized in this layout in the form of square-like rectangles with best aspect ratio.
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.
This layout creates rectangles with high aspect ratio and displays them horizontally.
This layout creates rectangles with high aspect ratio and displays them sorted vertically.
Drill the parent items to have a more detailed look at their child items.
Displays details about item values in a tooltip when the mouse is hovered over the item.
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.
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.
Export or print the rendered tree map to save a local copy for further use.
Exports the tree map to a PDF document or in image formats such as SVG, PNG, and JPEG in client-side.
Prints the rendered tree map directly from the browser.