Treemap Chart

Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.

The default height of treemap is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, height:"50%" would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

For more information, see: highcharts/chart.height.


Points are automatically arranged by their value size.

By default, point colors are assigned sequentially from the global data colors. Note that data points without a value (such as parent nodes) will still take on the next available color.

Grouped Data

Data can be grouped into distinct segments by specifying the relationship in the chartData. For a point to be a parent, it needs an id of type string included in its object. Any other data points may then reference that id as their parent value to establish the tree structure.

Parents can also be passed a custom color to be applied to all of its child points.


Adding the drillable prop allows the tree to be traversed up and down by clicking into each box. Relationships are established through the chartData, detailed in the Grouped Data section above.

Color Overrides

Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8 in an array. Hex colors are also available eg: #CA0095

Tooltip Customization

A custom tooltip format can be specified. The desired format can be passed as a string of custom HTML to the tooltipHtml prop.

{} and {point.value} are useful values that can be referenced for each point in the graph.

Available Props