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

XAxis.plotBands.label

configuration

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

Object

<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.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({
  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.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({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Background",
        background: "lightblue"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.border

Object

The border of the label.

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

String

The font style of the label.

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

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

Number|Object

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

Default: 5

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

Number|Object

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

Default: 0

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

Number

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

Default: 0

<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.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({
  xAxis: {
    plotBands: [{
      from: 1.5,
      to: 2.5,
      label: {
        text: "Special Range"
      }
    }]
  },
  series: [
    { data: [1, 2, 3, 4, 5] }
  ]
});
</script>

xAxis.plotBands.label.visible

Boolean

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

Default: true

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

Related Members