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

Navigator.pane.title

configuration

The title configuration of the navigator pane.

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

navigator.pane.title

String|Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        pane: {
            title: {
                text: "Navigator Pane Title"
            }
        },
        series: [{
            type: "line",
            field: "value",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), value: 1 },
            { date: new Date("2016/01/02"), value: 2 }
        ]
    }
});
</script>

navigator.pane.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: {
        pane: {
            title: {
                text: "Navigator Pane Title",
                background: "lightblue"
            }
        },
        series: [{
            type: "line",
            field: "value",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), value: 1 },
            { date: new Date("2016/01/02"), value: 2 }
        ]
    }
});
</script>

navigator.pane.title.border

Object

The border of the title.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        pane: {
            title: {
                text: "Navigator Pane Title",
                border: {
                    color: "red",
                    width: 2
                }
            }
        },
        series: [{
            type: "line",
            field: "value",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), value: 1 },
            { date: new Date("2016/01/02"), value: 2 }
        ]
    }
});
</script>

navigator.pane.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: {
        pane: {
            title: {
                text: "Navigator Pane Title",
                color: "red"
            }
        },
        series: [{
            type: "line",
            field: "value",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), value: 1 },
            { date: new Date("2016/01/02"), value: 2 }
        ]
    }
});
</script>

navigator.pane.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: {
        pane: {
            title: {
                text: "Navigator Pane Title",
                font: "bold 18px Arial"
            }
        },
        series: [{
            type: "line",
            field: "value",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), value: 1 },
            { date: new Date("2016/01/02"), value: 2 }
        ]
    }
});
</script>

navigator.pane.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: {
        pane: {
            title: {
                text: "Navigator Pane Title",
                margin: 10
            }
        },
        series: [{
            type: "line",
            field: "value",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), value: 1 },
            { date: new Date("2016/01/02"), value: 2 }
        ]
    }
});
</script>

navigator.pane.title.position

String

The position of the title.

The supported values are:

"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: {
        pane: {
            title: {
                text: "Navigator Pane Title",
                position: "left"
            }
        },
        series: [{
            type: "line",
            field: "value",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), value: 1 },
            { date: new Date("2016/01/02"), value: 2 }
        ]
    }
});
</script>

navigator.pane.title.text

String

The text of the title.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        pane: {
            title: {
                text: "Navigator Pane Title"
            }
        },
        series: [{
            type: "line",
            field: "value",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), value: 1 },
            { date: new Date("2016/01/02"), value: 2 }
        ]
    }
});
</script>

navigator.pane.title.visible

Boolean

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

Default: true

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        pane: {
            title: {
                text: "Navigator Pane Title",
                visible: false
            }
        },
        series: [{
            type: "line",
            field: "value",
            categoryField: "date"
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), value: 1 },
            { date: new Date("2016/01/02"), value: 2 }
        ]
    }
});
</script>

Related Members