TreeMap Overview

The Kendo UI TreeMap widget displays hierarchical data in a traditional tree structure. It also support different rendering types such us Squarified, Vertical and Horizontal(slice and dice algorithm).

Getting Started

Initialize TreeMap

The example below demonstrates how to initialize the TreeMap widget by using a selector within $(document).ready().

$(document).ready(function() {

Data Binding

Bind to Local Data

The example below demonstrates how to create the TreeMap container.

<div id="treeMap"></div>

Initialize the TreeMap and bind it in the way demonstrated below.

$(document).ready(function() {
        dataSource: {
            data: [{
                name: "foo",
                value: 1
        valueField: "value",
        textField: "name"

Bind to Remote Data

For detailed information on how to bind the Kendo UI TreeMap to different service end-points, refer to the hierarchical Data Source API article.


The TreeMap applies various colors to its leaf items. These are the items that have no children.

The following algorithms are used:

  • If the colors, or the color ranges, are defined via the colors configuration option, the TreeMap uses one color or range of colors for all sibling leaf items. The next color or range of colors are used for the next collection of sibling leaf items. When all colors or ranges have been used, the TreeMap starts over from the first one.
  • If the colors are defined in the dataSource and a colorField is set, the TreeMap applies the colors from the data.

The two methods can be combined. In this case, colors from the dataSource take precedence, and the TreeMap only uses the colors from the colors setting for items, which have no color defined in the data.

To set different colors to sibling leaf items without having the colors in the data, use the itemCreated or the dataBound event of the TreeMap.


Existing Instances

You can refer an existing TreeMap widget via Once a reference has been established, use the TreeMap API to control its behavior.

var treeMap = $("#treeMap").data("kendoTreeMap");

See Also

In this article
Not finding the help you need? Improve this article