New to Kendo UI for jQueryStart a free 30-day trial

ValueAxis.plotBands

configuration

The plot bands of the value axis.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis:  {
    plotBands: [
      { from: 1, to: 2, color: "red" }
    ]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

The color of the plot band.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis:  {
    plotBands: [
      { from: 1, to: 2, color: "red" }
    ]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

The start position of the plot band in axis units.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis:  {
    plotBands: [
      { from: 1, to: 2, color: "red" }
    ]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

The label configuration of the plotband.

The valueAxis.plotBands.label.text option must be set in order to display the plotband label.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    valueAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Range",
                color: "red",
                background: "yellow"
            }
        }]
    },
    series: [{
        data: [1, 2, 3]
    }]
});
</script>

The opacity of the plot band.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis:  {
    plotBands: [
      { from: 1, to: 2, color: "red", opacity: 0.5 }
    ]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

The end position of the plot band in axis units.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis:  {
    plotBands: [
      { from: 1, to: 2, color: "red" }
    ]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>