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

YAxis.plotBands.label

configuration

The label configuration of the plotband.

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

yAxis.plotBands.label

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        data: [1, 2, 3, 4, 5]
    }],
    yAxis: {
        plotBands: [{
            from: 2,
            to: 4,
            color: "lightblue",
            label: {
                text: "Target Range",
                color: "red",
                font: "bold 12px Arial"
            }
        }]
    }
});
</script>

yAxis.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({
    series: [{
        data: [1, 2, 3, 4, 5]
    }],
    yAxis: {
        plotBands: [{
            from: 2,
            to: 4,
            color: "lightblue",
            label: {
                text: "Center Aligned",
                align: "center"
            }
        }]
    }
});
</script>

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

yAxis.plotBands.label.border

Object

The border of the label.

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

yAxis.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({
    series: [{
        data: [1, 2, 3]
    }],
    yAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Target Range",
                color: "red"
            }
        }]
    }
});
</script>

yAxis.plotBands.label.font

String

The font style of the label.

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        data: [1, 2, 3]
    }],
    yAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Target Range",
                font: "14px Arial"
            }
        }]
    }
});
</script>

yAxis.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({
    series: [{
        data: [1, 2, 3]
    }],
    yAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Target Range",
                margin: 10
            }
        }]
    }
});
</script>

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

yAxis.plotBands.label.position

String

The position of the label.

The supported values are:

Default: "center"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        data: [1, 2, 3]
    }],
    yAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Target Range",
                position: "top"
            }
        }]
    }
});
</script>

"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

yAxis.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({
    series: [{
        data: [1, 2, 3]
    }],
    yAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Target Range",
                rotation: 45
            }
        }]
    }
});
</script>

yAxis.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({
    series: [{
        data: [1, 2, 3]
    }],
    yAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Target\nRange"
            }
        }]
    }
});
</script>

yAxis.plotBands.label.visible

Boolean

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

Default: true

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        data: [1, 2, 3]
    }],
    yAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Target Range",
                visible: false
            }
        }]
    }
});
</script>

yAxis.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({
    series: [{
        data: [1, 2, 3]
    }],
    yAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Target Range",
                visual: function(e) {
                    var defaultVisual = e.createVisual();
                    defaultVisual.options.background = "red";
                    return defaultVisual;
                }
            }
        }]
    }
});
</script>

Related Members