New to Kendo UI for jQuery? Start a free 30-day trial

Colors

configuration

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.

colors

Array

<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>

<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>