xAxis.plotBands Array

The plot bands of the x axis.

Example - set the scatter chart x axis plot bands

<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.

Example - set the scatter chart x axis plot band color

<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.

Example - set the scatter chart x axis plot band start position

<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.

xAxis.plotBands.label.align String (default: "left")

The position of the plotband label.

The supported values are:

• "left" - the plotband label is positioned on the left
• "right" - the plotband label is positioned on the right
• "center" - the plotband label is positioned in the center

xAxis.plotBands.label.background String

The background color of the label. Accepts a valid CSS color string, including hex and rgb.

xAxis.plotBands.label.border Object

The border of the label.

xAxis.plotBands.label.border.color String (default: "black")

The color of the border. Accepts a valid CSS color string, including hex and rgb.

xAxis.plotBands.label.border.dashType String (default: "solid")

The dash type of the border.

The following dash types are supported:

• "dash" - a line consisting of dashes
• "dashDot" - a line consisting of a repeating pattern of dash-dot
• "dot" - a line consisting of dots
• "longDash" - a line consisting of a repeating pattern of long-dash
• "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
• "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
• "solid" - a solid line

xAxis.plotBands.label.border.width Number (default: 0)

The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.

xAxis.plotBands.label.color String

The text color of the label. Accepts a valid CSS color string, including hex and rgb.

xAxis.plotBands.label.font String (default: "16px Arial,Helvetica,sans-serif")

The font style of the label.

xAxis.plotBands.label.margin Number|Object (default: 5)

The margin of the label. A numeric value will set all margins.

xAxis.plotBands.label.margin.bottom Number (default: 0)

The bottom margin of the label.

xAxis.plotBands.label.margin.left Number (default: 0)

The left margin of the label.

xAxis.plotBands.label.margin.right Number (default: 0)

The right margin of the label.

xAxis.plotBands.label.margin.top Number (default: 0)

The top margin of the label.

xAxis.plotBands.label.padding Number|Object (default: 0)

The padding of the label. A numeric value will set all paddings.

xAxis.plotBands.label.padding.bottom Number (default: 0)

The bottom padding of the label.

xAxis.plotBands.label.padding.left Number (default: 0)

The left padding of the label.

xAxis.plotBands.label.padding.right Number (default: 0)

The right padding of the label.

xAxis.plotBands.label.padding.top Number (default: 0)

The top padding of the label.

xAxis.plotBands.label.position String (default: "center")

The position of the label.

The supported values are:

• "top" - the axis label is positioned on the top
• "bottom" - the axis label is positioned on the bottom
• "center" - the axis label is positioned in the center

xAxis.plotBands.label.rotation Number (default: 0)

The rotation angle of the label. By default the label is not rotated.

xAxis.plotBands.label.text String

The text of the label.

The text can be split into multiple lines by using line feed characters ("\n").

xAxis.plotBands.label.visible Boolean (default: true)

If set to false the chart will not display the label.

xAxis.plotBands.label.visual Function

A function that can be used to create a custom visual for the label. The available argument fields are:

• text - the label text.
• rect - the kendo.geometry.Rect that defines where the visual should be rendered.
• sender - the chart instance (may be undefined).
• options - the label options.
• createVisual - a function that can be used to get the default visual.

xAxis.plotBands.opacity Number

The opacity of the plot band.

Example - set the scatter chart x axis plot band opacity

<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.

Example - set the scatter chart x axis plot band end position

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