CODEWITHSUNDEEP
kendo-uikendo-chart
jweaver
jweaver

Reputation: 661

Kendo UI pie/donut chart label format

I'm trying to format the label on a pie/donut chart but I keep getting a Syntax Error.

This works but isn't formated:

<div data-role="view" data-title="Utilization" data-layout="main" data-model="APP.models.utilization" data-show="sessionDetailsShow">



<div data-role="chart"
     data-title="{ text: 'Daily Machine Utilization', position: 'bottom' }"
     data-series-defaults="{ type: 'donut', labels: {visible: true, position: 'center', align: 'circle', template: '#= category # -  #= percentage # '}}"
     data-series="[{field: 'PercentOfTotal', categoryField: 'StatusName', colorField: 'Color'}]"
     data-bind="source: ds">

</div>

This gives me an 'Unexpected identifier' syntax error:

<div data-role="view" data-title="Utilization" data-layout="main" data-model="APP.models.utilization" data-show="sessionDetailsShow">



<div data-role="chart"
     data-title="{ text: 'Daily Machine Utilization', position: 'bottom' }"
     data-series-defaults="{ type: 'donut', labels: {visible: true, position: 'center', align: 'circle', template: '#= category # -  #= kendo.toString(percentage,'p0')# '}}"
     data-series="[{field: 'PercentOfTotal', categoryField: 'StatusName', colorField: 'Color'}]"
     data-bind="source: ds">

</div>

Is it because I can't call kendo.toString from here? Should I add a function to my View Model? If so what would the syntax be? Thanks.

Upvotes: 0

Views: 1679

Answers (1)

Nitin Mall
Nitin Mall

Reputation: 462

You can add kendo.toString over here only, try updating the template as below:

template: '#= category # -  #= kendo.toString(percentage,\"p0\")#'

The above will multiple the percentage value with 100, if you just want to add % symbol in the end to the value then you can do by below code:

template: '#= category # - #= keno.toString(percentage,\"#\\%\")#'

Upvotes: 1

Related Questions