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

Passing colour and a variable to donut kendo-chart

1 Answer 164 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Vadim asked on 23 Nov 2015, 07:25 PM


 I'm having a few issue with the following piece of code:

<div kendo-chart
     k-legend="{ position: 'bottom',
                 labels: { template: '#= #: #= value #' }}"
     k-series-defaults="{ type: 'donut',
                          holeSize: 45,
                          labels: { position: 'center', visible: true, background: 'transparent', color: 'white' }}"
     k-series-colours="[ '#309B46', '#E61E26' ]"
     k-chart-area="{ height: 170 }"
     k-series="[{ name: 'Normal', field: 'value', color: '#65c178' },
                { name: 'Offline', field: 100 - 'value', color: '#E61E26' }]"
     k-tooltip="{ visible: true,
                  template: '#= #: #= value #' }"

 My controller defines 'value' field, and the chart shows up, but I'm still having a few problems.

1) How can I call this directive with different a field variable without defining almost the same directive again? 
Say I have 'value' and 'value2', and I want to generate chart for each one of them, and call the same directive without explicitly defining it for each of the values.

2) How can I get "field: 100 - 'value'" to resolve in a directive? I don't want to have view logic in my controller 

3) How do I set colours for this chart? Colour parameter in k-series doesn't work even if I pass it from my controller, and neither does k-series-colours

 Thanks in advance for your help.

 Kind Regards,

1 Answer, 1 is accepted

Sort by
T. Tsonev
Telerik team
answered on 26 Nov 2015, 09:19 AM

Sorry for the delay.

You can build a custom directive to encapsulate the chart, as you'd normally do for any reusable block of content.
We have a tutorial on how to do this for another widget, but it applies to any widget.

You can't have computed expressions in series fields. These should be pre-computed in the model you're binding to.

I'm sure the last issue is caused by the way we spell "color". This seems to be the standard on the web.

I hope this helps.

T. Tsonev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question