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

CategoryAxis.labels.dateFormats

configuration

The format used to display 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.labels.format option will override the date formats.

categoryAxis.labels.dateFormats

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
        new Date("2012/01/01"),
        new Date("2012/01/02")
    ],
    type: "date",
    labels: {
      dateFormats: {
        days:"M-d"
      }
    }
  },
  series: [{
    data: [1,2,3]
  }]
});
</script>

categoryAxis.labels.dateFormats.days

String

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

Default: "M/d"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
        new Date("2012/01/01"),
        new Date("2012/01/02")
    ],
    type: "date",
    baseUnit: "days",
    labels: {
      dateFormats: {
        days: "M-d"
      }
    }
  },
  series: [{
    data: [1,2,3]
  }]
});
</script>

categoryAxis.labels.dateFormats.hours

String

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

Default: "HH:mm"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
        new Date("2012/01/01"),
        new Date("2012/01/02"),
        new Date("2012/01/03")
    ],
    type: "date",
    baseUnit: "hours",
    labels: {
      dateFormats: {
        hours: "HH mm"
      }
    }
  },
  series: [{
    data: [1,2,3]
  }]
});
</script>

categoryAxis.labels.dateFormats.months

String

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

Default: "MMM 'yy"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
        new Date("2012/01/01"),
        new Date("2012/01/02"),
        new Date("2012/01/03")
    ],
    type: "date",
    baseUnit: "months",
    labels: {
      dateFormats: {
        months: "MMM-yy"
      }
    }
  },
  series: [{
    data: [1,2,3]
  }]
});
</script>

categoryAxis.labels.dateFormats.weeks

String

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

Default: "M/d"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
        new Date("2012/01/01"),
        new Date("2012/01/02"),
        new Date("2012/01/03")
    ],
    type: "date",
    baseUnit: "weeks",
    labels: {
      dateFormats: {
        weeks: "M-d"
      }
    }
  },
  series: [{
    data: [1,2,3]
  }]
});
</script>

categoryAxis.labels.dateFormats.years

String

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

Default: "yyyy"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
        new Date("2012/01/01"),
        new Date("2012/01/02"),
        new Date("2012/01/03")
    ],
    type: "date",
    baseUnit: "years",
    labels: {
      dateFormats: {
        years: "yy"
      }
    }
  },
  series: [{
    data: [1,2,3]
  }]
});
</script>