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

Kendo UI Donut Chart - Labels with 0 shown in middle

1 Answer 355 Views

Charts

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

Minu asked on 01 Jul 2016, 07:50 PM

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

Kendo UI Donut Chart - Labels with 0 shown in middle

1 Answer, 1 is accepted