xAxis.plotBands

Array

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

xAxis.plotBands.color

String

The color of the plot band.

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

xAxis.plotBands.from

Number

The start position of the plot band in axis units.

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

xAxis.plotBands.label

Object

The label configuration of the plotband.

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Custom Band",
        background: "yellow",
        color: "black",
        align: "center"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.opacity

Number

The opacity of the plot band.

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

xAxis.plotBands.to

Number

The end position of the plot band in axis units.

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

XAxis.plotBands

xAxis.plotBands

xAxis.plotBands.color

xAxis.plotBands.from

xAxis.plotBands.label

xAxis.plotBands.opacity

xAxis.plotBands.to

Related Members