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

YAxis.labels.dateFormats

configuration

The format used to display the labels when the x values are dates. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.

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

yAxis.labels.dateFormats

Object

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

yAxis.labels.dateFormats.days

String

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

Default: "M/d"

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

yAxis.labels.dateFormats.hours

String

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

Default: "HH:mm"

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

yAxis.labels.dateFormats.months

String

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

Default: "MMM 'yy"

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

yAxis.labels.dateFormats.weeks

String

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

Default: "M/d"

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

yAxis.labels.dateFormats.years

String

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

Default: "yyyy"

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