NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

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

Healthcare
Financial
Technology
Industrial Goods
Basic Materials
Consumer Goods
  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Samples of PHP, Node.js, .NET integration
  • Support of All Modern browsers
  • 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.

Featured
Mapping
Visualization
Infographics
Artistic Visualization
Data Sources
Statistical Visualization
Network Visualization
Data Design Tips
Miscellaneous Visualization
Projects
Self- surveillance
Statistics
Software
Tutorials

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

Technology
Services
Healthcare
Financial
Basic materials
Consumer goods
Utilities

Compactness

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