Posted by & filed under Technical Tips.

Move your mouse over the chart to see the total amount


The TreeMap chart represents the chart data in the table that shows the parent-child relationship of the data with different box sizes. The child data box is displayed in the parent data box, which is a tree structure where each data box has its own color and size. The TreeMap chart is mainly used to identify the data distribution of certain regions.


Creating a TreeMap chart with KoolChart is simple and easy. You just need to define the <TreeMapSeries> series in the XML layout as follows:

<TreeMapSeries weightField=”Revenue” nameField=”Country” … >

The two main attributes that should be defined in the <TreeMapSeries> series are “weightField” and “nameField”.


weightField : Sets the field name for the weight value, which decides the size of the box. (Revenue in the sample chart)
nameField : Sets the field name for the text word in the chart. (Country in this sample chart)

TreeMap Chart Demo