How to specify different color for each tile

[Rohit]

I am creating a tree-map. Treemap is static. It will always have 3 tiles. The data can change but the number of tiles will remain fixed. I looked at the below example. 

How can I force each tile to have a unique color from the array of colors I have specified.  

<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", "yellow"]
  });
</script>

[Rohit]

If I use below mentioned option, I get the desired result, but I do not want to send formatting (color) information along with datasource. I will be receiving the data through a service & service will not provide this color option.

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

 

 

[Dimo]

Hi Rohit,

By design, the TreeMap uses the same color or color range from the colors setting for all sibling leaf nodes. This spares the need to use too many colors or ranges.

The desired behavior should be achieved by setting colors in the dataSource. Since this is undesired, you can use the widget's itemCreated or dataBound event and apply the colors manually.

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/treemap#events-itemCreated

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/treemap#events-dataBound

function onTreeMapDataBound(e) {
  e.sender.wrapper.find(".k-leaf").each(function(idx, element) {
  element.style.background = e.sender.options.colors[idx];
}

Regards,
Dimo
Telerik