Show multiple labels on kendoUI chart category axis

0
votes

Is there any possibility of showing more than one label in the category axis? I need to show two fields from my data source in my category axis(And,yes there is no multi category axis. I need to show multiple fields on the same category axis. Please help if I'm missing out searching for any related topic. Thanks in advance.

2
angularjskendo-uikendo-asp.net-mvckendo-chart
Welcome to Stackoverflow. Share the code you have tried yet. - Nagama Inamdar
categoryAxis: { field: "year", labels: { rotation: -90 } }, Sorry for not putting whole code. I am new to this stack over flow,couldnt comment whole code. I just need to get another field in this category axis. named , 'Group' like that of year, and both should be visible in the category axis. - Praveen Joshi
You can use label templates in the category axis: dojo.telerik.com/@ezanker/etoNO - ezanker
@ezanker thanks alot. That helped me a bit of it. But the dates aren't in the format like \n in the datasource. So i would like to split the date and use the hours and mins in the next line. I hope u understood. Thanks for this though :) - Praveen Joshi

2 Answers

1
votes

You can use label templates on the categoryAxis labels:

    categoryAxis: {
      field: 'submitTime',
      majorGridLines: {
        visible: false
      },
      labels: {
         visible: true,
          template: ' #= FormatLabel(dataItem) # '
        }
    },

In this example the template is passing the dataItem to a function which builds the desired string:

function FormatLabel(dataItem){
  var tg = dataItem.TargetGroup;
  var st = dataItem.submitTime.replace(" ", "\n");
  return tg + "\n" + st;      
}

DEMO

0
votes

In your series, you can define the template on the label to display pretty much anything you want from the item it is bound to.

series: [ 
      { 
        field: 'totalVisits', 
        name: 'Total Visits',  
        labels: {
          visible: true,
          template: ' #= dataItem.month # \n Total Visits : #= dataItem.totalVisits # \n Unique Visitors : #= dataItem.uniqueVisitors # '
        }
      }
    ],

See working sample at Kendo Dojo

If you need a bit more functionality, you can set that template to a function, and return whatever you want from it.

series: [ 
      { 
        field: 'totalVisits', 
        name: 'Total Visits',  
        labels: {
          visible: true,
          template: chartSeriesTemplate
        }
      }
   ],

function chartSeriesTemplate(e) {
      return kendo.format("{0} \n Total Visits:{1}\n Unique Visitors:{2} \n Ratio :{3}", e.dataItem.month, e.dataItem.totalVisits, e.dataItem.uniqueVisitors, (parseInt(e.dataItem.uniqueVisitors) / parseInt(e.dataItem.totalVisits)).toFixed(2));
    }

See working sample at Kendo Dojo

Documentation for series template at Kendo Docs