Hi,
I am trying to load a kendo UI Donut chart.
The code is given below:
function createChart(){
$("#chart").kendoChart({
title: {
position: "bottom",
text: "ABC"
},
legend: {
visible: true
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150
},
series: [
{
name: "Current Year: " + "<%= currentAcdYearName %>",
data: [
{
category: "Tenure-Track",
value: "10",
color: "#0de219"
}, {
category: "Perm Budget NTT",
value: "20",
color: "#90cc38"
}, {
category: "Soft Budget NTT",
value: "45",
color: "#568c35"
}, {
category: "Students",
value: "76",
color: "#606634"
}, {
category: "TBD",
value: "65",
color: "#304d38"
}
],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #=kendo.format(\'{0:P0}\', percentage)# "
}
}
],
tooltip: {
visible: true,
//template: '#= category # - #= kendo.toString(percentage,\"#\\%\")#'
//template: "#= category # (#= series.name #): #= value #%"
template: "#= category # (#= series.name #): \n #=kendo.format(\'{0:P0}\', percentage)# "
}
});
}
Once the values of any of the category becomes 0,eg.,
category: "TBD",
value: "65",
color: "#304d38"
If the value is 0 instead of 65, the label goes inside the center circle.
Could you please let me know how to retain the label on the donut without making it come inside the center of the donut.
Thanks,
minu
1 Answer, 1 is accepted
This issue is caused by you are using strings in the series while the chart expects numeric values (documentation link). For your convenience here is the modified example.
Regards,
Iliana Nikolova
Telerik