categoryAxis.rangeLabels.visual Function

A function that can be used to create a custom visual for the date range labels. The available argument fields are:

• createVisual - a function that can be used to get the default visual.
• culture - the default culture (if set) on the label
• dataItem - the data item, in case a field has been specified
• format - the default format of the label
• options - the label options.
• rect - the kendo.geometry.Rect that defines where the visual should be rendered.
• sender - the chart instance (may be undefined).
• text - the label text.
• value - the category value

Example - using custom visual for the labels

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    type: "date",
    justified: true,
    baseUnit: "days",
    rangeLabels: {
        format: 'dd-MMM',
        visible: true,
        visual: function(e) {
            var rect = new kendo.geometry.Rect(e.rect.origin, [e.rect.size.width, 100]);
            var layout = new kendo.drawing.Layout(rect, {
                orientation: "vertical",
                alignContent: "center"
            });
            var words = e.text.split("-");
            for (var i = 0; i < words.length; i++) {
                layout.append(new kendo.drawing.Text(words[i]));
            }
            layout.reflow();
            return layout;
        }
    },
    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>