categoryAxis.rangeLabels.template String|Function

The template which renders the labels.

The fields which can be used in the template are:

  • value - the category value
  • dataItem - the data item, in case a field has been specified. If the category does not have a corresponding item in the data then an empty object will be passed.
  • format - the default format of the label
  • culture - the default culture (if set) on the label
  • text - The default label text.
  • index - The index of the label.
  • count - The total number of rendered labels.

The text can be split into multiple lines by using line feed characters ("\n").

Example - set the category axis template as a string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    type: "date",
    justified: true,
    baseUnit: "days",
    rangeLabels: {
      template: "Year: #: value.getFullYear() #",
      visible: true
    },
    labels: {
      format: "M-d"
    }
  },
  series: [{
    type: 'line',
    field: 'value',
    categoryField: 'date',
    data: [{
      value: 1,
      date: new Date("2012/01/01")
    }, {
      value: 2,
      date: new Date("2012/01/04")
    }, {
      value: 3,
      date: new Date("2012/01/07")
    }]
  }]
});
</script>

Example - set the category axis template as a function

<div id="chart"></div>
<script>
function rangeLabelTemplate(e) {
  return "Year: " + e.value.getFullYear();
}

$("#chart").kendoChart({
  categoryAxis: {
    type: "date",
    justified: true,
    baseUnit: "days",
    rangeLabels: {
      template: rangeLabelTemplate,
      visible: true
    },
    labels: {
      format: "M-d"
    }
  },
  series: [{
    type: 'line',
    field: 'value',
    categoryField: 'date',
    data: [{
      value: 1,
      date: new Date("2012/01/01")
    }, {
      value: 2,
      date: new Date("2012/01/04")
    }, {
      value: 3,
      date: new Date("2012/01/07")
    }]
  }]
});
</script>
In this article