Label Templates based on series fields from JSON

2 posts, 1 answers
  1. Devendra
    Devendra avatar
    16 posts
    Member since:
    Nov 2014

    Posted 29 Jul 2015 Link to this post


    I have below stacked type chart where it display data from a service. I want to display the label value dynamically for each field in the series. Here i have Value and UnusedValue, how to display these values for their respective fileds "Used Capacity" and "Unused Capacity". The below code displays the same value for both fields because the label template doesn't have any condition.

    function createchart(chartID, chartTitle) {
             dataSource: {
                 transport: {
                     read: {
                         url: serviceurl,
                         dataType: "json"
             title: {
                 text: "RAU"
             legend: {
                 position: "right"
             seriesDefaults: {
                 type: "column",
                 stack: {
                     type: "100%"
                 labels: {
                     visible: true,
                     position: "bottom",
                     template: "#= dataItem.Value #%"
             series: [{
                 name: "Used Capacity",
                 field: "Value",
                 CategoryField: "RAU"
             }, {
                 name: "Unused Capacity",
                 field: "UnusedValue",
                 CategoryField: "RAU",
                 color: "#FFFFFF"
             valueAxis: {
                 line: {
                     visible: false
                 minorGridLines: {
                     visible: true
                 visible: false
             categoryAxis: {
                 categories: ["Reliability", "Availability", "Utilisation"],
                 majorGridLines: {
                     visible: false
             tooltip: {
                 visible: true,
                 template: "#= #: #= dataItem.Value #"

    Best Regards,


  2. Answer
    Plamen Lazarov
    Plamen Lazarov avatar
    135 posts

    Posted 31 Jul 2015 Link to this post

    Hello Devendra,

    In order to achieve the expected result you should use custom JavaScript logic in the seriesDefaults.labels.template function. Please find below a basic example which demonstrates this approach:

    Plamen Lazarov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top