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

Panes

configuration

The chart panes configuration.

Panes are used to split the chart in two or more parts. The panes are ordered from top to bottom.

Each axis can be associated with a pane by setting its pane option to the name of the desired pane. Axis that don't have specified pane are placed in the top (default) pane.

Series are moved to the desired pane by associating them with an axis.

panes

Array

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            high: 43,
            low: 40,
            open: 42,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            high: 44,
            low: 41,
            open: 41,
            volume: 2631000
        }]
    },
    series: [{
        field: "close",
        name: "Price",
        axis: "price"
    }, {
        field: "volume",
        name: "Volume",
        axis: "volume"
    }],
    valueAxis: [{
        name: "price",
        pane: "pricePane"
    }, {
        name: "volume",
        pane: "volumePane"
    }],
    panes: [{
        name: "pricePane",
        height: 200
    }, {
        name: "volumePane",
        height: 100
    }]
});
</script>

panes.background

String

The background color of the pane.

<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",
        background: "#f0f0f0"
    }]
});
</script>

panes.border

Object

The border of the pane.

<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",
        border: {
            color: "blue",
            width: 2
        }
    }]
});
</script>

panes.clip

Boolean

Specifies whether the charts in the pane should be clipped.

<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",
        clip: false
    }]
});
</script>

panes.height

Number

The pane height in pixels.

<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",
        height: 300
    }]
});
</script>

panes.margin

Number|Object

The margin of the pane.

pseudo

    // sets the top, right, bottom and left margin to 3px.
    margin: 3

    // sets the top and left margin to 1px
    margin: { top: 1, left: 1 }

panes.name

String

The unique pane name.

<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",
        axis: "price"
    }, {
        field: "volume",
        name: "Volume",
        axis: "volume"
    }],
    valueAxis: [{
        name: "price",
        pane: "pricePane"
    }, {
        name: "volume",
        pane: "volumePane"
    }],
    panes: [{
        name: "pricePane"
    }, {
        name: "volumePane"
    }]
});
</script>

panes.padding

Number|Object

The padding of the pane.

pseudo

    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    padding: { top: 1, left: 1 }

panes.title

String|Object

The pane title text or configuration.

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

Related Members