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

ValueAxis.plotBands.label

configuration

The label configuration of the plotband.

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

valueAxis.plotBands.label

Object

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

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

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

valueAxis.plotBands.label.border

Object

The border of the label.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    valueAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Range",
                border: {
                    color: "#ff6800",
                    width: 2
                }
            }
        }]
    },
    series: [{
        data: [1, 2, 3]
    }]
});
</script>

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

valueAxis.plotBands.label.font

String

The font style of the label.

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

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

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

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

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

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

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

valueAxis.plotBands.label.visible

Boolean

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

Default: true

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

valueAxis.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({
    valueAxis: {
        plotBands: [{
            from: 1,
            to: 2,
            label: {
                text: "Range",
                visual: (e) => {
                    const rect = new kendo.geometry.Rect([0, 0], [50, 20]);
                    const text = new kendo.drawing.Text(e.text, [0, 0], {
                        fill: { color: "#ff6800" },
                        font: "12px Arial"
                    });
                    return text;
                }
            }
        }]
    },
    series: [{
        data: [1, 2, 3]
    }]
});
</script>

Related Members