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

Navigator.categoryAxis.autoBaseUnitSteps

configuration

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

navigator.categoryAxis.autoBaseUnitSteps

Object

<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.days

Array

The days unit steps.

Default: [1, 2, 3]

<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.hours

Array

The hours unit steps.

Default: [1, 2, 3]

<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.minutes

Array

The minutes unit steps.

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

<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.months

Array

The months unit steps.

Default: [1, 2, 3, 6]

<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.seconds

Array

The seconds unit steps.

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

<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.weeks

Array

The weeks unit steps.

Default: [1, 2]

<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.years

Array

The years unit steps.

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

<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>