kendo showing "," and "%" in labels - kendo-ui

Question

I am using Kendo and am displaying labels on a bar chart. Right now with the following code the labels display numbers as "25.4". I need the labels to show the percentage sign after the number and thought I can do this in the label template part somewhere in "template: " #= value#"", but adding % or '%' or "%" doesn't work. How can I get a % to show up with the number on the label?
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent",
template: " #= value#"
}
},
In another chart I need to do a similar thing but have the labels display as a number but with a comma in appropriate places. Does anybody know how to do that also? Ex. I need 32,123 instead of 32123.

Answer 1

Instead of using template I would suggest using format (but, of course, you can get the same thing using template).
Examples:
Printing 25.4 as 25.4% would be
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent",
format : "{0:n}%"
}
},
You can even make it display certain number of decimal digits using, for 3 use format : "{0:n3}%":
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent",
format : "{0:n3}%"
}
},
This is when you have the number stored as percentage, i.e. having 25% stored as 25 and not as 0.25.
$(document).ready(function() {
$("#chart").kendoChart({
title: {
text: "Total Sales (percentage)"
},
legend: {
visible: false
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent",
format : "{0:n2}%"
}
},
series: [
{
name: "Serie1",
data: [10, 20, 25, 30, 10, 5]
}
],
valueAxis: {
max: 50,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
}
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="chart" style="height: 300px"></div>