New to Kendo UI for jQuery? Start a free 30-day trial

CategoryAxis.rangeLabels.dateFormats

configuration

The format used to display date range labels for date category axis. The {0} placeholder represents the category value.

The chart will choose the appropriate format for the current categoryAxis.baseUnit. Setting the categoryAxis.rangeLabels.format option will override the date formats.

categoryAxis.rangeLabels.dateFormats

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    type: "date",
    justified: true,
    baseUnit: "days",
    rangeLabels: {
      dateFormats: {
        days: "d"
      },
      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>

categoryAxis.rangeLabels.dateFormats.days

String

The format used when categoryAxis.baseUnit is set to "days".

Default: "M/d"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    type: "date",
    justified: true,
    baseUnit: "days",
    rangeLabels: {
      dateFormats: {
        days: "d"
      },
      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>

categoryAxis.rangeLabels.dateFormats.hours

String

The format used when categoryAxis.baseUnit is set to "hours".

Default: "HH:mm"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    type: "date",
    justified: true,
    baseUnit: "days",
    rangeLabels: {
      dateFormats: {
        hours: "HH:mm:ss"
      },
      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>

categoryAxis.rangeLabels.dateFormats.months

String

The format used when categoryAxis.baseUnit is set to "months".

Default: "MMM 'yy"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    type: "date",
    justified: true,
    baseUnit: "days",
    rangeLabels: {
      dateFormats: {
        months: "MMM-yy"
      },
      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>

categoryAxis.rangeLabels.dateFormats.weeks

String

The format used when categoryAxis.baseUnit is set to "weeks".

Default: "M/d"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    type: "date",
    justified: true,
    baseUnit: "days",
    rangeLabels: {
      dateFormats: {
        weeks: "M-d"
      },
      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>

categoryAxis.rangeLabels.dateFormats.years

String

The format used when categoryAxis.baseUnit is set to "years".

Default: "yyyy"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    type: "date",
    justified: true,
    baseUnit: "days",
    rangeLabels: {
      dateFormats: {
        years: "yy"
      },
      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>