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

PlotArea

configuration

The plot area configuration options. This is the area containing the plotted series.

plotArea

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41
        }, {
            date: new Date(2016, 0, 2),
            close: 42
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    plotArea: {
        background: "#f5f5f5",
        opacity: 0.8
    }
});
</script>

plotArea.background

String

The background color of the plot area.

Default: "white"

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

plotArea.border

Object

The border of the plot area.

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

plotArea.margin

Number|Object

The margin of the plot area.

Default: 5

pseudo

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

    // sets the top and left margin to 1px
    // margin right and bottom are with 5px (by default)
    margin: { top: 1, left: 1 }

plotArea.opacity

Number

The background opacity of the plot area.

Default: 1

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41
        }, {
            date: new Date(2016, 0, 2),
            close: 42
        }]
    },
    series: [{
        field: "close",
        name: "Price"
    }],
    plotArea: {
        background: "#e6f2ff",
        opacity: 0.7
    }
});
</script>