Radar chart with different colors for each column

4 posts, 0 answers
  1. Daniël
    Daniël avatar
    9 posts
    Member since:
    Sep 2012

    Posted 18 Mar Link to this post

    Hi,

    I'm trying to create a radar chart with different a different color for each column. I have managed to get this http://dojo.telerik.com/@danieltulp/ivUZO but now I have created multiple series and there maybe a better solution. If there isn't how can I resolve the problems I now have:

    - the ordering is not from first series at the top and then clockwise which is what I want, how can I create a good ordering?

    - how can I have the series name displayed next to them?

  2. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 18 Mar Link to this post

    Hi Daniël,

    Please take a look at this Telerik Dojo illustrating an updated version of your sample.

    Here are the changes:
    1.   The data is stored in a Kendo DataSource so I can use the dataItems.

    2.   The colors are set by using the dataIndex for each item in the series. (I outputted to the console each object for your observation.)
    series: [{
      ...
      color: function(e) {
        var colors =  ["#CF5B6B", "#96945C", "#7C647E", "#7D8EBD", "#F1C736"];
        var index = e.index % colors.length;
        return colors[index];   
      }
    }],

    You can also keep your color scheme if you add more items in your data as shown in this dojo.

    3.   To add the name of each item, use the dataItems with a template in the tooltip:
    tooltip:{
           template: "#=dataItem.name # #=value #",
           visible: true
         }

    Hopefully, this helps.

    Regards,
    Patrick
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Daniël
    Daniël avatar
    9 posts
    Member since:
    Sep 2012

    Posted 20 Mar in reply to Patrick Link to this post

    Works great, thanks.

  5. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 21 Mar Link to this post

    Hi Daniël,

    Glad everything is working.

    Regards,
    Patrick
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready