Leaf node

Leaf nodes under data collections are displayed as a rectangle, sized and colored according to values that you assign.

Color mapping

Organize the nodes by customizing their colors based on the underlying values.

Data labels

Data labels in the React TreeMap control are used to display more details about a particular item. Labels can be trimmed, hidden, or wrapped if the label width exceeds the item’s bounds.


The React TreeMap control provides support to drill the parent items to get a more detailed look at their child items.


In the interactive React TreeMap control, when the mouse hovers over an item, it displays details about the item.

Syncfusion React TreeMap

The React TreeMap is a feature-rich component used to visualize both hierarchical and flat data.