Introduction
AI Components & Features
Contribution
Knowledge Base
StockChart

The plot bands of the category axis.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            plotBands: [{
                from: new Date(2012, 1, 2),
                to: new Date(2012, 1, 4),
                color: "lightblue",
                opacity: 0.5
            }]
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) },
            { value: 3, date: new Date(2012, 1, 3) },
            { value: 4, date: new Date(2012, 1, 4) },
            { value: 5, date: new Date(2012, 1, 5) }
        ]
    }]
});
</script>

The color of the plot band.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            plotBands: [{
                from: new Date(2012, 1, 2),
                to: new Date(2012, 1, 4),
                color: "yellow"
            }]
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) },
            { value: 3, date: new Date(2012, 1, 3) },
            { value: 4, date: new Date(2012, 1, 4) },
            { value: 5, date: new Date(2012, 1, 5) }
        ]
    }]
});
</script>

The start position of the plot band in axis units.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            plotBands: [{
                from: new Date(2012, 1, 2),
                to: new Date(2012, 1, 4),
                color: "lightgray"
            }]
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) },
            { value: 3, date: new Date(2012, 1, 3) },
            { value: 4, date: new Date(2012, 1, 4) },
            { value: 5, date: new Date(2012, 1, 5) }
        ]
    }]
});
</script>

The opacity of the plot band.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            plotBands: [{
                from: new Date(2012, 1, 2),
                to: new Date(2012, 1, 4),
                color: "blue",
                opacity: 0.3
            }]
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) },
            { value: 3, date: new Date(2012, 1, 3) },
            { value: 4, date: new Date(2012, 1, 4) },
            { value: 5, date: new Date(2012, 1, 5) }
        ]
    }]
});
</script>

The end position of the plot band in axis units.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            plotBands: [{
                from: new Date(2012, 1, 2),
                to: new Date(2012, 1, 4),
                color: "orange"
            }]
        }
    },
    series: [{
        type: "line",
        field: "value",
        categoryField: "date",
        data: [
            { value: 1, date: new Date(2012, 1, 1) },
            { value: 2, date: new Date(2012, 1, 2) },
            { value: 3, date: new Date(2012, 1, 3) },
            { value: 4, date: new Date(2012, 1, 4) },
            { value: 5, date: new Date(2012, 1, 5) }
        ]
    }]
});
</script>
In this article
navigator.categoryAxis.plotBandsnavigator.categoryAxis.plotBands.colornavigator.categoryAxis.plotBands.fromnavigator.categoryAxis.plotBands.opacitynavigator.categoryAxis.plotBands.to
Not finding the help you need?
Contact Support