Introduction
Contribution
Knowledge Base
Chart

xAxis.plotBandsArray

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

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

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

The label configuration of the plotband.

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

Example 

<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.label.alignString(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

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Right aligned",
        align: "right"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.backgroundString

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

Example 

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

xAxis.plotBands.label.borderObject

The border of the label.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Bordered",
        border: {
          color: "red",
          width: 2,
          dashType: "dash"
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.border.colorString(default: "black")

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

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Red border",
        border: {
          color: "red",
          width: 2
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.border.dashTypeString(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

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Dashed border",
        border: {
          color: "blue",
          width: 2,
          dashType: "dash"
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.border.widthNumber(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.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Thick border",
        border: {
          color: "green",
          width: 5
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.colorString

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

Example 

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

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

The font style of the label.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Bold font",
        font: "bold 18px Arial"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.marginNumber|Object(default: 5)

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

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "With margin",
        margin: 15
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.margin.bottomNumber(default: 0)

The bottom margin of the label.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Bottom margin",
        margin: { bottom: 20 }
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.margin.leftNumber(default: 0)

The left margin of the label.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Left margin",
        margin: { left: 30 }
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.margin.rightNumber(default: 0)

The right margin of the label.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Right margin",
        margin: { right: 25 }
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.margin.topNumber(default: 0)

The top margin of the label.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Top margin",
        margin: { top: 20 }
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.paddingNumber|Object(default: 0)

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

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "With padding",
        padding: 10,
        background: "lightgray"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.padding.bottomNumber(default: 0)

The bottom padding of the label.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Bottom padding",
        padding: { bottom: 15 },
        background: "lightblue"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.padding.leftNumber(default: 0)

The left padding of the label.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Left padding",
        padding: { left: 20 },
        background: "lightgreen"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.padding.rightNumber(default: 0)

The right padding of the label.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Right padding",
        padding: { right: 18 },
        background: "lightyellow"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.padding.topNumber(default: 0)

The top padding of the label.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Top padding",
        padding: { top: 12 },
        background: "lightcoral"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.positionString(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

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Top position",
        position: "top"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.rotationNumber(default: 0)

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

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Rotated label",
        rotation: 45
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.textString

The text of the label.

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

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Special Range"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.visibleBoolean(default: true)

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

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Hidden label",
        visible: false
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.visualFunction

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.

Example 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Custom visual",
        visual: function(e) {
          var visual = new kendo.drawing.Group();
          var rect = new kendo.drawing.Rect(e.rect, {
            fill: { color: "red" },
            stroke: { color: "blue", width: 2 }
          });
          var text = new kendo.drawing.Text(e.text, [e.rect.center().x, e.rect.center().y], {
            fill: { color: "white" }
          });
          visual.append(rect, text);
          return visual;
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.opacityNumber

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

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>
In this article
xAxis.plotBandsxAxis.plotBands.colorxAxis.plotBands.fromxAxis.plotBands.labelxAxis.plotBands.label.alignxAxis.plotBands.label.backgroundxAxis.plotBands.label.borderxAxis.plotBands.label.border.colorxAxis.plotBands.label.border.dashTypexAxis.plotBands.label.border.widthxAxis.plotBands.label.colorxAxis.plotBands.label.fontxAxis.plotBands.label.marginxAxis.plotBands.label.margin.bottomxAxis.plotBands.label.margin.leftxAxis.plotBands.label.margin.rightxAxis.plotBands.label.margin.topxAxis.plotBands.label.paddingxAxis.plotBands.label.padding.bottomxAxis.plotBands.label.padding.leftxAxis.plotBands.label.padding.rightxAxis.plotBands.label.padding.topxAxis.plotBands.label.positionxAxis.plotBands.label.rotationxAxis.plotBands.label.textxAxis.plotBands.label.visiblexAxis.plotBands.label.visualxAxis.plotBands.opacityxAxis.plotBands.to
Not finding the help you need?
Contact Support