Radar chart with different colors for each column

[Daniël]

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?

[Patrick | Technical Support Engineer, Senior]

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

 

 

[Daniël]

Works great, thanks.

[Patrick | Technical Support Engineer, Senior]

Hi Daniël,

Glad everything is working.

Regards,
Patrick
Telerik