Introduction
Contribution
Knowledge Base
Chart

categoryAxis.plotBandsArray

The plot bands of the category axis.

Example - set the category plot bands 

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

categoryAxis.plotBands.colorString

The color of the plot band.

Example - set the category plot band color 

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

categoryAxis.plotBands.fromNumber

The start position of the plot band in axis units.

Example - set the category plot band start position 

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

categoryAxis.plotBands.labelObject

The label configuration of the plotband.

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

Example 

<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.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 - set the categoryAxis plotBands label align 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        align: "center"
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.plotBands.label.backgroundString

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

Example - set the categoryAxis plotBands label background 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        background: "yellow"
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.plotBands.label.borderObject

The border of the label.

Example - configure the categoryAxis plotBands label border 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        border: {
          color: "red",
          width: 2
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

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

Example - set the categoryAxis plotBands label border color 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        border: {
          color: "green",
          width: 1
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.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 - set the categoryAxis plotBands label border dashType 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        border: {
          dashType: "dash",
          width: 1
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.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 - set the categoryAxis plotBands label border width 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        border: {
          width: 3,
          color: "black"
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.plotBands.label.colorString

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

Example - set the categoryAxis plotBands label color 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        color: "red"
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The font style of the label.

Example - set the categoryAxis plotBands label font 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        font: "14px Arial"
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

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

Example - set the categoryAxis plotBands label margin 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        margin: 10
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The bottom margin of the label.

Example - set the categoryAxis plotBands label bottom margin 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        margin: {
          bottom: 5
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The left margin of the label.

Example - set the categoryAxis plotBands label left margin 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        margin: {
          left: 5
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The right margin of the label.

Example - set the categoryAxis plotBands label right margin 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        margin: {
          right: 5
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The top margin of the label.

Example - set the categoryAxis plotBands label top margin 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        margin: {
          top: 5
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

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

Example - set the categoryAxis plotBands label padding 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        padding: 8
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The bottom padding of the label.

Example - set the categoryAxis plotBands label bottom padding 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        padding: {
          bottom: 5
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The left padding of the label.

Example - set the categoryAxis plotBands label left padding 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        padding: {
          left: 5
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The right padding of the label.

Example - set the categoryAxis plotBands label right padding 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        padding: {
          right: 5
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

The top padding of the label.

Example - set the categoryAxis plotBands label top padding 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        padding: {
          top: 5
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.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 - set the categoryAxis plotBands label position 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        position: "top"
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

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

Example - set the categoryAxis plotBands label rotation 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        rotation: 45
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.plotBands.label.textString

The text of the label.

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

Example - set the categoryAxis plotBands label text 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Important\nRange"
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

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

Example - hide the categoryAxis plotBands label 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        visible: false
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.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 - set the categoryAxis plotBands label visual 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar"],
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: "lightblue",
      label: {
        text: "Band Label",
        visual: (e) => {
          var rect = new kendo.geometry.Rect(e.rect.origin, [60, 20]);
          var path = kendo.drawing.Path.fromRect(rect, {
            fill: {
              color: "red"
            },
            stroke: {
              color: "black"
            }
          });
          var text = new kendo.drawing.Text(e.text, [e.rect.origin.x + 5, e.rect.origin.y + 5], {
            fill: {
              color: "white"
            }
          });
          var group = new kendo.drawing.Group();
          group.append(path, text);
          return group;
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.plotBands.opacityNumber

The opacity of the plot band.

Example - set the category plot band opacity 

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

The end position of the plot band in axis units.

Example - set the category plot band end position 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    plotBands: [
      { from: 1, to: 2, color: "red" }
    ]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>
In this article
categoryAxis.plotBandscategoryAxis.plotBands.colorcategoryAxis.plotBands.fromcategoryAxis.plotBands.labelcategoryAxis.plotBands.label.aligncategoryAxis.plotBands.label.backgroundcategoryAxis.plotBands.label.bordercategoryAxis.plotBands.label.border.colorcategoryAxis.plotBands.label.border.dashTypecategoryAxis.plotBands.label.border.widthcategoryAxis.plotBands.label.colorcategoryAxis.plotBands.label.fontcategoryAxis.plotBands.label.margincategoryAxis.plotBands.label.margin.bottomcategoryAxis.plotBands.label.margin.leftcategoryAxis.plotBands.label.margin.rightcategoryAxis.plotBands.label.margin.topcategoryAxis.plotBands.label.paddingcategoryAxis.plotBands.label.padding.bottomcategoryAxis.plotBands.label.padding.leftcategoryAxis.plotBands.label.padding.rightcategoryAxis.plotBands.label.padding.topcategoryAxis.plotBands.label.positioncategoryAxis.plotBands.label.rotationcategoryAxis.plotBands.label.textcategoryAxis.plotBands.label.visiblecategoryAxis.plotBands.label.visualcategoryAxis.plotBands.opacitycategoryAxis.plotBands.to
Not finding the help you need?
Contact Support