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

CategoryAxis.plotBands.label

configuration

The label configuration of the plotband.

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

categoryAxis.plotBands.label

Object

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

String

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

Default: "left"

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

String

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

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

Object

The border of the 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",
        border: {
          color: "red",
          width: 2
        }
      }
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.plotBands.label.color

String

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

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

String

The font style of the label.

Default: "16px Arial,Helvetica,sans-serif"

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

Number|Object

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

Default: 5

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

Number|Object

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

Default: 0

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

String

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

Default: "center"

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

Number

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

Default: 0

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

String

The text of the label.

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

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

Boolean

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

Default: true

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

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

Related Members