All Components

Plot Bands

The Chart plot bands allow you to highlight a specific range of an axis.

Plot Bands represent colored ranges that highlight certain areas in the Chart—usually specific thresholds which designate whether the data falls under specific boundaries or not. To create the plot bands, set the plotBands configuration of valueAxis.

You can independently set each plot band by specifying the following properties:

  • from—The start position of the plot band.
  • to—The end position of the plot band.
  • opacity—The opacity of the plot band.
  • color—The color of the plot band.
<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Site Visitors Stats \n /thousands/'"
                 :legend-visible="false"
                 :series-defaults-type="'column'"
                 :series="series"
                 :category-axis="categoryAxis"
                 :value-axis="valueAxis"
                 :tooltip="tooltip"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                name: "Total Visits",
                data: [56000, 63000, 74000, 91000, 117000, 138000]
            },
            {
                name: "Unique visitors",
                data: [52000, 34000, 23000, 48000, 67000, 83000]
            }],
            valueAxis: [{
                max: 140000,
                plotBands: [{
                    from: 20000,
                    to: 60000,
                    color: "#c00",
                    opacity: 0.3
                }, {
                    from: 60000,
                    to: 61000,
                    color: "#c00",
                    opacity: 0.8
                }],
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                },
                labels: {
                    rotation: "auto"
                }
            }],
            categoryAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        }
    }
})
In this article