• Open in:

Zoomable Multilevel Tree Map

In a Tree Map the rectangle is divided into smaller rectangles with their size representing the value of each data item. Those smaller rectangles can in turn be divided into even smaller ones creating a sub-treemap.

Key implementation details

Treemap is part of the hierarchy module of amCharts. We configure all the data fields on the Treemap and set its initialDepth to 2 to display two levels of data. We then process our dataset into a structure suitable for a hierarchy chart. And, finally, we add logos as bullets for the top level items.

This chart is added to a Zoomable Container, so you can pan, zoom-in and zoom-out this chart using mouse wheel, pinch-zoom or zoom tools on the bottom-right.

Related tutorials

Demo source