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

Panes.title

configuration

The pane title text or configuration.

panes.title

String|Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            volume: 2631000
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    panes: [{
        name: "default",
        title: "Stock Price"
    }]
});
</script>

panes.title.background

String

The background color of the title. Any valid CSS color string will work here, including hex and rgb.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            volume: 2631000
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    panes: [{
        name: "default",
        title: {
            text: "Stock Price",
            background: "#f0f0f0"
        }
    }]
});
</script>

panes.title.border

Object

The border of the title.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            volume: 2631000
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    panes: [{
        name: "default",
        title: {
            text: "Stock Price",
            border: {
                color: "blue",
                width: 1
            }
        }
    }]
});
</script>

panes.title.color

String

The text color of the title. Any valid CSS color string will work here, including hex and rgb.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            volume: 2631000
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    panes: [{
        name: "default",
        title: {
            text: "Stock Price",
            color: "blue"
        }
    }]
});
</script>

panes.title.font

String

The font style of the title.

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            volume: 2631000
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    panes: [{
        name: "default",
        title: {
            text: "Stock Price",
            font: "bold 18px Arial"
        }
    }]
});
</script>

panes.title.margin

Number|Object

The margin of the title.

Default: 5

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            volume: 2631000
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    panes: [{
        name: "default",
        title: {
            text: "Stock Price",
            margin: 10
        }
    }]
});
</script>

panes.title.position

String

The position of the title.

"left"

The pane title is positioned on the left

"right"

The pane title is positioned on the right

"center"

The pane title is positioned in the center

Default: "center"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            volume: 2631000
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    panes: [{
        name: "default",
        title: {
            text: "Stock Price",
            position: "left"
        }
    }]
});
</script>

panes.title.text

String

The text of the title.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            volume: 2631000
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    panes: [{
        name: "default",
        title: {
            text: "Stock Performance Chart"
        }
    }]
});
</script>

panes.title.visible

Boolean

The visibility of the title.

Default: true

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            volume: 2631000
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    panes: [{
        name: "default",
        title: {
            text: "Stock Performance Chart",
            visible: false
        }
    }]
});
</script>

Related Members