CODEWITHSUNDEEP
angularjskendo-uikendo-asp.net-mvckendo-chart
Praveen Joshi
Praveen Joshi

Reputation: 11

Show multiple labels on kendoUI chart category axis

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.

Upvotes: 0

Views: 2466

Answers (2)

ezanker
ezanker

Reputation: 24738

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

Upvotes: 1

Robin Giltner
Robin Giltner

Reputation: 3055

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

Upvotes: 0

Related Questions