kendo showing “,” and “%” in labels

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.

OnaBai OnaBai · Accepted Answer · 2014-12-09T22:19:08

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>

kendo showing “,” and “%” in labels

1 Answers