navigator.categoryAxis.autoBaseUnitStepsObject
The discrete navigator.categoryAxis.baseUnitStep values when either navigator.categoryAxis.baseUnit is set to "fit" or navigator.categoryAxis.baseUnitStep is set to "auto".
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1 10:30:00"), value: 100 },
{ date: new Date("2023/1/1 10:30:15"), value: 105 },
{ date: new Date("2023/1/1 10:30:30"), value: 102 }
]
},
navigator: {
categoryAxis: {
baseUnit: "auto",
autoBaseUnitSteps: {
seconds: [5, 10, 15, 30, 60],
minutes: [1, 2, 5, 15, 30],
hours: [1, 2, 4, 6, 12]
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.autoBaseUnitSteps.secondsArray(default: [1, 2, 5, 15, 30])
The seconds unit steps.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1 10:30:00"), value: 100 },
{ date: new Date("2023/1/1 10:30:15"), value: 105 },
{ date: new Date("2023/1/1 10:30:30"), value: 102 }
]
},
navigator: {
categoryAxis: {
baseUnit: "auto",
autoBaseUnitSteps: {
seconds: [1, 5, 10, 15, 30, 60]
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.autoBaseUnitSteps.minutesArray(default: [1, 2, 5, 15, 30])
The minutes unit steps.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1 10:30:00"), value: 100 },
{ date: new Date("2023/1/1 11:00:00"), value: 105 },
{ date: new Date("2023/1/1 11:30:00"), value: 102 }
]
},
navigator: {
categoryAxis: {
baseUnit: "auto",
autoBaseUnitSteps: {
minutes: [1, 2, 5, 15, 30, 60]
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.autoBaseUnitSteps.hoursArray(default: [1, 2, 3])
The hours unit steps.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1 10:00:00"), value: 100 },
{ date: new Date("2023/1/1 14:00:00"), value: 105 },
{ date: new Date("2023/1/1 18:00:00"), value: 102 }
]
},
navigator: {
categoryAxis: {
baseUnit: "auto",
autoBaseUnitSteps: {
hours: [1, 2, 4, 6, 8, 12]
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.autoBaseUnitSteps.daysArray(default: [1, 2, 3])
The days unit steps.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/3"), value: 105 },
{ date: new Date("2023/1/5"), value: 102 }
]
},
navigator: {
categoryAxis: {
baseUnit: "auto",
autoBaseUnitSteps: {
days: [1, 2, 3, 5, 7]
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.autoBaseUnitSteps.weeksArray(default: [1, 2])
The weeks unit steps.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/1/8"), value: 105 },
{ date: new Date("2023/1/15"), value: 102 }
]
},
navigator: {
categoryAxis: {
baseUnit: "auto",
autoBaseUnitSteps: {
weeks: [1, 2, 4]
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.autoBaseUnitSteps.monthsArray(default: [1, 2, 3, 6])
The months unit steps.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), value: 100 },
{ date: new Date("2023/4/1"), value: 105 },
{ date: new Date("2023/7/1"), value: 102 }
]
},
navigator: {
categoryAxis: {
baseUnit: "auto",
autoBaseUnitSteps: {
months: [1, 2, 3, 6, 12]
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>navigator.categoryAxis.autoBaseUnitSteps.yearsArray(default: [1, 2, 3, 5, 10, 25, 50])
The years unit steps.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2020/1/1"), value: 100 },
{ date: new Date("2022/1/1"), value: 105 },
{ date: new Date("2024/1/1"), value: 102 }
]
},
navigator: {
categoryAxis: {
baseUnit: "auto",
autoBaseUnitSteps: {
years: [1, 2, 5, 10]
}
},
series: {
type: "line",
field: "value"
}
},
series: [{
field: "value",
type: "line"
}]
});
</script>In this article