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

Navigator.categoryAxis

configuration

The category axis configuration options.

navigator.categoryAxis

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), value: 100 },
            { date: new Date("2023/1/2"), value: 105 },
            { date: new Date("2023/1/3"), value: 102 }
        ]
    },
    navigator: {
        categoryAxis: {
            labels: {
                color: "red"
            },
            background: "#f0f0f0"
        },
        series: {
            type: "line",
            field: "value"
        }
    },
    series: [{
        field: "value",
        type: "line"
    }]
});
</script>

navigator.categoryAxis.autoBaseUnitSteps

Object

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

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

Object|Date|Array

Category index at which the first value axis crosses this axis (when set as an object).

Category indices at which the value axes cross the category axis (when set as an array).

set an index greater than or equal to the number of categories to denote the far end of the axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), value: 100 },
            { date: new Date("2023/1/2"), value: 105 },
            { date: new Date("2023/1/3"), value: 102 }
        ]
    },
    navigator: {
        categoryAxis: {
            axisCrossingValue: 1
        },
        series: {
            type: "line",
            field: "value"
        }
    },
    series: [{
        field: "value",
        type: "line"
    }]
});
</script>

navigator.categoryAxis.background

String

The background color of the axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), value: 100 },
            { date: new Date("2023/1/2"), value: 105 },
            { date: new Date("2023/1/3"), value: 102 }
        ]
    },
    navigator: {
        categoryAxis: {
            background: "#f0f0f0"
        },
        series: {
            type: "line",
            field: "value"
        }
    },
    series: [{
        field: "value",
        type: "line"
    }]
});
</script>

navigator.categoryAxis.baseUnit

String

The base time interval for the date axis. The default base unit is determined automatically from the minimum difference between subsequent categories.

The supported values are:

"fit"
"seconds"
"minutes"
"hours"
"days"
"weeks"
"months"
"years"

Setting baseUnit to "fit" will set such base unit and categoryAxis.baseUnitStep that the total number of categories does not exceed categoryAxis.maxDateGroups.

Series data is aggregated for the specified base unit using the series.aggregate function.

<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:31:00"), value: 105 },
            { date: new Date("2023/1/1 10:32:00"), value: 102 }
        ]
    },
    navigator: {
        categoryAxis: {
            baseUnit: "minutes"
        },
        series: {
            type: "line",
            field: "value"
        }
    },
    series: [{
        field: "value",
        type: "line"
    }]
});
</script>

navigator.categoryAxis.baseUnitStep

Object

The step (interval) between categories in base units. Setting it to "auto" will set the step to such value that the total number of categories does not exceed categoryAxis.maxDateGroups.

This option is ignored if categoryAxis.baseUnit is set to "fit".

Default: 1

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), value: 100 },
            { date: new Date("2023/1/2"), value: 105 },
            { date: new Date("2023/1/3"), value: 102 }
        ]
    },
    navigator: {
        categoryAxis: {
            baseUnit: "days",
            baseUnitStep: 2
        },
        series: {
            type: "line",
            field: "value"
        }
    },
    series: [{
        field: "value",
        type: "line"
    }]
});
</script>

navigator.categoryAxis.color

String

The color to apply to all axis elements. Accepts a valid CSS color string, including hex and rgb. Can be overridden by categoryAxis.labels.color and categoryAxis.line.color.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), value: 100 },
            { date: new Date("2023/1/2"), value: 105 },
            { date: new Date("2023/1/3"), value: 102 }
        ]
    },
    navigator: {
        categoryAxis: {
            color: "red"
        },
        series: {
            type: "line",
            field: "value"
        }
    },
    series: [{
        field: "value",
        type: "line"
    }]
});
</script>

navigator.categoryAxis.crosshair

Object

The crosshair configuration options.

The crosshair is displayed when the categoryAxis.crosshair.visible option is set to true.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), value: 100 },
            { date: new Date("2023/1/2"), value: 105 },
            { date: new Date("2023/1/3"), value: 102 }
        ]
    },
    navigator: {
        categoryAxis: {
            crosshair: {
                visible: true,
                color: "red",
                width: 2
            }
        },
        series: {
            type: "line",
            field: "value"
        }
    },
    series: [{
        field: "value",
        type: "line"
    }]
});
</script>

navigator.categoryAxis.field

String

The data item field which contains the category name. Requires the dataSource option to be set.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2016/01/01"),
            open: 41.62,
            high: 41.69,
            low: 39.81,
            close: 40.12,
            volume: 2632000
        }]
    },
    navigator: {
        categoryAxis: {
            field: "date"
        }
    }
});
</script>

navigator.categoryAxis.justified

Boolean

If set to true the chart will position categories and series points on major ticks. This removes the empty space before and after the series.

The default value is false except for "area" and "verticalArea".

This option is ignored if the series.type option is set to "bar", "column", "ohlc" or "candlestick".

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2016/01/01"),
            open: 41.62,
            high: 41.69,
            low: 39.81,
            close: 40.12,
            volume: 2632000
        }]
    },
    navigator: {
        categoryAxis: {
            justified: true
        }
    }
});
</script>

navigator.categoryAxis.labels

Object

The axis labels configuration.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2016/01/01"),
            open: 41.62,
            high: 41.69,
            low: 39.81,
            close: 40.12,
            volume: 2632000
        }]
    },
    navigator: {
        categoryAxis: {
            labels: {
                color: "red",
                font: "12px Arial"
            }
        }
    }
});
</script>

navigator.categoryAxis.line

Object

The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            line: {
                color: "blue",
                width: 2
            }
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) }
        ]
    }]
});
</script>

navigator.categoryAxis.majorGridLines

Object

The configuration of the major grid lines. These are the lines that are an extension of the major ticks through the body of the chart.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            majorGridLines: {
                color: "blue",
                visible: true,
                width: 2
            }
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) }
        ]
    }]
});
</script>

navigator.categoryAxis.majorTicks

Object

The configuration of the category axis major ticks.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            majorTicks: {
                color: "blue",
                size: 10
            }
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) }
        ]
    }]
});
</script>

The last date displayed on the category date axis. By default, the minimum date is the same as the last category. This is often used in combination with the categoryAxis.min and categoryAxis.roundToBaseUnit options to set up a fixed date range.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            max: new Date(2012, 1, 10)
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 5) },
            { value: 3, date: new Date(2012, 1, 15) }
        ]
    }]
});
</script>

navigator.categoryAxis.maxDateGroups

Number

The maximum number of groups (categories) to display when categoryAxis.baseUnit is set to "fit" or categoryAxis.baseUnitStep is set to "auto".

Default: 10

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            maxDateGroups: 5
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) },
            { value: 3, date: new Date(2012, 1, 3) },
            { value: 4, date: new Date(2012, 1, 4) },
            { value: 5, date: new Date(2012, 1, 5) },
            { value: 6, date: new Date(2012, 1, 6) }
        ]
    }]
});
</script>

navigator.categoryAxis.maxDivisions

Number

The maximum number of ticks and labels to display.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            maxDivisions: 5
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) },
            { value: 3, date: new Date(2012, 1, 3) },
            { value: 4, date: new Date(2012, 1, 4) },
            { value: 5, date: new Date(2012, 1, 5) },
            { value: 6, date: new Date(2012, 1, 6) }
        ]
    }]
});
</script>

navigator.categoryAxis.min

Object

The first date displayed on the category date axis. By default, the minimum date is the same as the first category. This is often used in combination with the categoryAxis.min and categoryAxis.roundToBaseUnit options to set up a fixed date range.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            min: new Date(2012, 1, 5)
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 5) },
            { value: 3, date: new Date(2012, 1, 15) }
        ]
    }]
});
</script>

navigator.categoryAxis.minorGridLines

Object

The configuration of the minor grid lines. These are the lines that are an extension of the minor ticks through the body of the chart.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            minorGridLines: {
                color: "lightgray",
                visible: true
            }
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) }
        ]
    }]
});
</script>

navigator.categoryAxis.minorTicks

Object

The configuration of the category axis minor ticks.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            minorTicks: {
                color: "blue",
                size: 6
            }
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) }
        ]
    }]
});
</script>

navigator.categoryAxis.notes

Object

The category axis notes configuration.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            notes: {
                position: "top",
                icon: {
                    background: "red",
                    size: 10
                },
                label: {
                    text: "Important Date"
                },
                data: [{
                    value: new Date("2012/01/15"),
                    text: "Event"
                }]
            }
        }
    },
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), value: 1 },
            { date: new Date("2012/01/15"), value: 2 },
            { date: new Date("2012/02/01"), value: 3 }
        ]
    },
    dateField: "date",
    valueField: "value"
});
</script>

navigator.categoryAxis.plotBands

Array

The plot bands of the category axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            plotBands: [{
                from: new Date(2012, 1, 2),
                to: new Date(2012, 1, 4),
                color: "lightblue",
                opacity: 0.5
            }]
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) },
            { value: 3, date: new Date(2012, 1, 3) },
            { value: 4, date: new Date(2012, 1, 4) },
            { value: 5, date: new Date(2012, 1, 5) }
        ]
    }]
});
</script>

navigator.categoryAxis.reverse

Boolean

If set to true the category axis direction will be reversed. By default categories are listed from left to right and from bottom to top.

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            reverse: true
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) },
            { value: 3, date: new Date(2012, 1, 3) },
            { value: 4, date: new Date(2012, 1, 4) }
        ]
    }]
});
</script>

navigator.categoryAxis.roundToBaseUnit

Boolean

If set to true the chart will round the first and last date to the nearest base unit.

The roundToBaseUnit option will be ignored if series.type is set to "bar", "column", "ohlc" or "candlestick".

Default: true

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            roundToBaseUnit: false
        }
    },
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), value: 1 },
            { date: new Date("2012/01/15"), value: 2 },
            { date: new Date("2012/02/01"), value: 3 }
        ]
    },
    dateField: "date",
    valueField: "value"
});
</script>

navigator.categoryAxis.title

Object

The title configuration of the category axis.

The categoryAxis.title.text option must be set in order to display the title.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Time Period",
                color: "blue",
                font: "16px Arial"
            }
        }
    },
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), value: 1 },
            { date: new Date("2012/01/15"), value: 2 },
            { date: new Date("2012/02/01"), value: 3 }
        ]
    },
    dateField: "date",
    valueField: "value"
});
</script>

navigator.categoryAxis.visible

Boolean

If set to true the chart will display the category axis. By default the category axis is visible.

Default: true

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            visible: false
        }
    },
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), value: 1 },
            { date: new Date("2012/01/15"), value: 2 },
            { date: new Date("2012/02/01"), value: 3 }
        ]
    },
    dateField: "date",
    valueField: "value"
});
</script>

If set to true the chart will display the category axis. By default the category axis is visible.

navigator.categoryAxis.weekStartDay

Number

Default: kendo.days.Sunday

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            baseUnit: "weeks",
            weekStartDay: kendo.days.Monday
        }
    }
});
</script>

Related Members