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

Navigator.categoryAxis.title

configuration

The title configuration of the category axis.

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

navigator.categoryAxis.title

Object

<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.title.background

String

The background color of the title. Accepts a valid CSS color string, including hex and rgb.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Time Period",
                background: "lightblue"
            }
        }
    },
    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.border

Object

The border of the title.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Time Period",
                border: {
                    color: "red",
                    width: 2
                }
            }
        }
    },
    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.color

String

The text color of the title. Accepts a valid CSS color string, including hex and rgb.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Time Period",
                color: "red"
            }
        }
    },
    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.font

String

The font style of the title.

Default: "16px Arial,Helvetica,sans-serif"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Time Period",
                font: "18px bold Verdana"
            }
        }
    },
    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.margin

Number|Object

The margin of the title. A numeric value will set all margins.

Default: 5

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Time Period",
                margin: {
                    top: 10,
                    bottom: 10,
                    left: 5,
                    right: 5
                }
            }
        }
    },
    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.padding

Number|Object

The padding of the title. A numeric value will set all paddings.

Default: 0

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Time Period",
                padding: {
                    top: 8,
                    bottom: 8,
                    left: 12,
                    right: 12
                }
            }
        }
    },
    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.position

String

The position of the title.

The supported values are:

"top" - the axis title is positioned on the top (applicable to vertical axis)
"bottom" - the axis title is positioned on the bottom (applicable to vertical axis)
"left" - the axis title is positioned on the left (applicable to horizontal axis)
"right" - the axis title is positioned on the right (applicable to horizontal axis)
"center" - the axis title is positioned in the center

Default: "center"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Time Period",
                position: "center"
            }
        }
    },
    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.rotation

Number

The rotation angle of the title. By default the title is not rotated.

Default: 0

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Time Period",
                rotation: 45
            }
        }
    },
    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.text

String

The text of the title.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Date Range"
            }
        }
    },
    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.visible

Boolean

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

Default: true

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            title: {
                text: "Time Period",
                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>

Related Members