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

CategoryAxis.autoBaseUnitSteps

configuration

The discrete categoryAxis.baseUnitStep values when either categoryAxis.baseUnit is set to "fit" or categoryAxis.baseUnitStep is set to "auto".

The axis will try to divide the active period into successively larger intervals. It will start from x-second intervals, where x is picked from the autoBaseUnitSteps.seconds array. Then it will move to minutes, seconds and so on. This will continue until the number of intervals is less than maxDateGroups.

categoryAxis.autoBaseUnitSteps

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    categoryAxis: {
        categories: [
            new Date("2012/02/01 00:00:00"),
            new Date("2012/02/02 00:00:00"),
            new Date("2012/02/20 00:00:00")
        ],
        baseUnitStep: "auto",
        autoBaseUnitSteps: {
            days: [3]
        }
    }
});
</script>

categoryAxis.autoBaseUnitSteps.days

Array

The days unit steps.

Default: [1, 2, 3]

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2012/02/01"),
      new Date("2012/02/03"),
      new Date("2012/02/05")
    ],
    baseUnitStep: "auto",
    autoBaseUnitSteps: {
      days: [2, 4]
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.autoBaseUnitSteps.hours

Array

The hours unit steps.

Default: [1, 2, 3]

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2012/02/01 00:00:00"),
      new Date("2012/02/01 02:00:00"),
      new Date("2012/02/01 04:00:00")
    ],
    baseUnitStep: "auto",
    autoBaseUnitSteps: {
      hours: [2, 4]
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.autoBaseUnitSteps.milliseconds

Array

The milliseconds unit steps.

Default: [1, 100, 100]

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2012/02/01 00:00:00.000"),
      new Date("2012/02/01 00:00:00.500"),
      new Date("2012/02/01 00:00:01.000")
    ],
    baseUnitStep: "auto",
    autoBaseUnitSteps: {
      milliseconds: [200, 500]
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.autoBaseUnitSteps.minutes

Array

The minutes unit steps.

Default: [1, 2, 5, 15, 30]

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2012/02/01 00:00:00"),
      new Date("2012/02/01 00:10:00"),
      new Date("2012/02/01 00:20:00")
    ],
    baseUnitStep: "auto",
    autoBaseUnitSteps: {
      minutes: [5, 10]
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.autoBaseUnitSteps.months

Array

The months unit steps.

Default: [1, 2, 3, 6]

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2012/02/01"),
      new Date("2012/04/01"),
      new Date("2012/06/01")
    ],
    baseUnitStep: "auto",
    autoBaseUnitSteps: {
      months: [2, 4]
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.autoBaseUnitSteps.seconds

Array

The seconds unit steps.

Default: [1, 2, 5, 15, 30]

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2012/02/01 00:00:00"),
      new Date("2012/02/01 00:00:10"),
      new Date("2012/02/01 00:00:20")
    ],
    baseUnitStep: "auto",
    autoBaseUnitSteps: {
      seconds: [5, 10]
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.autoBaseUnitSteps.weeks

Array

The weeks unit steps.

Default: [1, 2]

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2012/02/01"),
      new Date("2012/02/08"),
      new Date("2012/02/15")
    ],
    baseUnitStep: "auto",
    autoBaseUnitSteps: {
      weeks: [1, 3]
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.autoBaseUnitSteps.years

Array

The years unit steps.

Default: [1, 2, 3, 5, 10, 25, 50]

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2010/01/01"),
      new Date("2015/01/01"),
      new Date("2020/01/01")
    ],
    baseUnitStep: "auto",
    autoBaseUnitSteps: {
      years: [5, 10]
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>