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.

JavaScript TreeMap Library

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 with leaf node


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


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 with titles and subtitles


Color mapping

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

TreeMap with range color mapping

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 with equal color mapping

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 with desaturation color mapping

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 with data labels


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 with label template


Legend

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

TreeMap with default legend

Default

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

TreeMap with interactive legend

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 with squarified layout

Squarified

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

TreeMap with slice and dice layout

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 with horizontal layout

SliceAndDiceHorizontal

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

TreeMap with vertical layout

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


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 with selection and highlighting


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


Exporting

Export or print the rendered tree map to save a local copy for further use.

TreeMap exporting

Export

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

Printing TreeMap in browser

Print

Prints the rendered tree map directly from the browser.


50+ JAVASCRIPT CONTROLS

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.