categoryAxis.autoBaseUnitStepsObject
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.
Example - set category axis auto base unit steps
<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.millisecondsArray(default: [1, 100, 100])
The milliseconds unit steps.
Example - set categoryAxis autoBaseUnitSteps milliseconds
<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.secondsArray(default: [1, 2, 5, 15, 30])
The seconds unit steps.
Example - set categoryAxis autoBaseUnitSteps seconds
<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.minutesArray(default: [1, 2, 5, 15, 30])
The minutes unit steps.
Example - set categoryAxis autoBaseUnitSteps minutes
<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.hoursArray(default: [1, 2, 3])
The hours unit steps.
Example - set categoryAxis autoBaseUnitSteps hours
<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.daysArray(default: [1, 2, 3])
The days unit steps.
Example - set categoryAxis autoBaseUnitSteps days
<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.weeksArray(default: [1, 2])
The weeks unit steps.
Example - set categoryAxis autoBaseUnitSteps weeks
<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.monthsArray(default: [1, 2, 3, 6])
The months unit steps.
Example - set categoryAxis autoBaseUnitSteps months
<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.yearsArray(default: [1, 2, 3, 5, 10, 25, 50])
The years unit steps.
Example - set categoryAxis autoBaseUnitSteps years
<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>In this article