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

AxisDefaults.plotBands

configuration

The plot bands of the axis.

axisDefaults.plotBands

Array

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

axisDefaults.plotBands.color

String

The color of the plot band.

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

axisDefaults.plotBands.from

Number

The start position of the plot band in axis units.

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

axisDefaults.plotBands.opacity

Number

The opacity of the plot band.

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

axisDefaults.plotBands.to

Number

The end position of the plot band in axis units.

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