JavaScript TreeMap UI Widget

TreeMap is a JavaScript widget, which allows representing complex hierarchical data in a compact form: as a set of nested rectangles. You can define which content will be displayed in the rectangles and use custom styling for the items.

JS TreeMap StylingView Demo

JavaScript widget is very flexible, you can set different styles for TreeMap items to depict their correlation depending on a particular parameter.

JS TreeMap Styling with CSS
View demo

One-Level RenderingView Demo

One-level rendering mode allows displaying only first-level branches on the screen . By clicking a particular branch, you can get access to the second-level branches related to it. Such an approach lets you save space on the screen, which can be pretty handy in the case of mobile devices.

CompactnessView Demo

Thanks to its size and specificity of the structure TreeMap can display a very large number of items on the screen at once.

TreeMap UI widget compactness
View demo

Handy navigationView Demo

JavaScript TreeMap branches containing child nodes can be easily expanded or collapsed with a single click in order to keep the screen clear of superfluous information.

Setting headerView Demo

You can define a template that will be used for showing the titles of the expanded branches in the header of the widget.

Browser Сompatibility

JavaScript TreeMap UI operates effectively across all popular browsers like IE8+, Mozilla Firefox, Opera, Chrome and Apple Safari.

Ready for Touch Devices

Mobile apps developed with TreeMap widget operate on most modern touch devices, like iPad, iPhone, Android, Windows Phone devices.

Frameworks Integration

UI library with JavaScript TreeMap widget can be integrated with jQuery, Angular, React, VueJS, Backbone frameworks

Accessible Javascript TreeMap

The widget meets WAI-ARIA requirements: attributes, keyboard navigation, high-contrast skin.

Windows and Popups
Uploader