colors Array

The default colors for the TreeMap items (tiles). Can be set to array of specific colors or array of color ranges. For more information on the widget behavior, see the Colors section on the TreeMap Overview page.

Example - set the treemap tile colors

<div id="treemap"></div>
<script>
  $("#treemap").kendoTreeMap({
    dataSource: {
      data: [{
        name: "Root",
        items: [{ name: "foo", value: 1 }, { name: "bar", value: 2 }, { name: "baz", value: 3 }]
      }]
    },
    valueField: "value",
    textField: "name",
    colors: ["red", "green"]
  });
</script>

Example - set the treemap color ranges

<div id="treemap"></div>
<script>
  $("#treemap").kendoTreeMap({
    dataSource: {
      data: [{
        name: "Root",
        items: [{
          name: "Group A",
          value: 1,
          items: [{ name: "foo", value: 1 }, { name: "bar", value: 2 }, { name: "baz", value: 3 }]
        }, {
          name: "Group B",
          value: 1,
          items: [{ name: "foo", value: 1 }, { name: "bar", value: 2 }, { name: "baz", value: 3 }]
        }]
      }]
    },
    valueField: "value",
    textField: "name",
    colors: [["#ff6666", "#ff0000"], ["#7fb17f", "#006400"]]
  });
</script>