JavaScript TreeMap UI widget

TreeMap is a JavaScript widget that allows presenting 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 add custom styling for them.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Samples of PHP, Node.js, .NET integration
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

JS TreeMap styling

The widget is very flexible. You can set different styles for Treemap items to depict their correlation depending on a particular parameter.

One-level rendering

One-level rendering mode allows displaying only same-level items on the screen. By clicking a particular item you can get access to its child items. Such an approach lets you save space on the screen, which can be pretty handy in case of mobile devices.

Click on any item to see sub data


Thanks to its size and peculiar structure TreeMap can display a lot of items on the screen while staying clear and comprehensible.