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

CategoryAxis.plotBands

configuration

The plot bands of the category axis.

categoryAxis.plotBands

Array

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

categoryAxis.plotBands.color

String

The color of the plot band.

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

categoryAxis.plotBands.from

Number

The start position of the plot band in axis units.

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

categoryAxis.plotBands.label

Object

The label configuration of the plotband.

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        data: [1, 2, 3, 4, 5]
    }],
    categoryAxis: {
        plotBands: [{
            from: 1,
            to: 3,
            label: {
                text: "Target Range",
                align: "center",
                background: "yellow"
            }
        }]
    }
});
</script>

categoryAxis.plotBands.opacity

Number

The opacity of the plot band.

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

categoryAxis.plotBands.to

Number

The end position of the plot band in axis units.

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

CategoryAxis.plotBands

categoryAxis.plotBands

categoryAxis.plotBands.color

categoryAxis.plotBands.from

categoryAxis.plotBands.label

categoryAxis.plotBands.opacity

categoryAxis.plotBands.to

Related Members