This is a migrated thread and some comments may be shown as answers.

Radar chart with different colors for each column

3 Answers 198 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Daniël
Top achievements
Rank 2
Daniël asked on 18 Mar 2016, 10:08 AM

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?

3 Answers, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 18 Mar 2016, 10:34 PM
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!
 
0
Daniël
Top achievements
Rank 2
answered on 20 Mar 2016, 09:09 PM

Works great, thanks.

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 21 Mar 2016, 02:27 PM
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!
 
Tags
Charts
Asked by
Daniël
Top achievements
Rank 2
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Daniël
Top achievements
Rank 2
Share this question
or