How to specify different color for each tile

3 posts, 0 answers
  1. Rohit
    Rohit avatar
    2 posts
    Member since:
    Feb 2016

    Posted 01 Feb Link to this post

    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>

  2. Rohit
    Rohit avatar
    2 posts
    Member since:
    Feb 2016

    Posted 01 Feb Link to this post

    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> 

     

     

  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 Feb Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top