yAxis.plotBandsArray
The plot bands of the y axis.
Example - set the scatter chart y axis plot bands
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]]}
],
yAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
}
});
</script>yAxis.plotBands.colorString
The color of the plot band.
Example - set the scatter chart y axis plot band color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]]}
],
yAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
}
});
</script>yAxis.plotBands.fromNumber
The start position of the plot band in axis units.
Example - set the scatter chart y axis plot band start position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]]}
],
yAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
}
});
</script>yAxis.plotBands.labelObject
The label configuration of the plotband.
The yAxis.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]
}],
yAxis: {
plotBands: [{
from: 2,
to: 4,
color: "lightblue",
label: {
text: "Target Range",
color: "red",
font: "bold 12px Arial"
}
}]
}
});
</script>yAxis.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
<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.backgroundString
The background color of the label. Accepts a valid CSS color string, including hex and rgb.
Example
<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.borderObject
The border of the label.
Example
<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.border.colorString(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3, 4, 5]
}],
yAxis: {
plotBands: [{
from: 2,
to: 4,
color: "lightblue",
label: {
text: "Red Border",
border: {
color: "red",
width: 2
}
}
}]
}
});
</script>yAxis.plotBands.label.border.dashTypeString(default: "solid")
The dash type of the border.
The following dash types are supported:
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}],
yAxis: {
plotBands: [{
from: 1,
to: 2,
label: {
text: "Target Range",
border: {
dashType: "dash"
}
}
}]
}
});
</script>- "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
yAxis.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
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}],
yAxis: {
plotBands: [{
from: 1,
to: 2,
label: {
text: "Target Range",
border: {
width: 2
}
}
}]
}
});
</script>yAxis.plotBands.label.colorString
The text color of the label. Accepts a valid CSS color string, including hex and rgb.
Example
<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.fontString(default: "16px Arial,Helvetica,sans-serif")
The font style of the label.
Example
<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.marginNumber|Object(default: 5)
The margin of the label. A numeric value will set all margins.
Example
<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.margin.bottomNumber(default: 0)
The bottom margin of the label.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}],
yAxis: {
plotBands: [{
from: 1,
to: 2,
label: {
text: "Target Range",
margin: {
bottom: 10
}
}
}]
}
});
</script>yAxis.plotBands.label.margin.leftNumber(default: 0)
The left margin of the label.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}],
yAxis: {
plotBands: [{
from: 1,
to: 2,
label: {
text: "Target Range",
margin: {
left: 10
}
}
}]
}
});
</script>yAxis.plotBands.label.margin.rightNumber(default: 0)
The right margin of the label.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}],
yAxis: {
plotBands: [{
from: 1,
to: 2,
label: {
text: "Target Range",
margin: {
right: 10
}
}
}]
}
});
</script>yAxis.plotBands.label.margin.topNumber(default: 0)
The top margin of the label.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}],
yAxis: {
plotBands: [{
from: 1,
to: 2,
label: {
text: "Target Range",
margin: {
top: 10
}
}
}]
}
});
</script>yAxis.plotBands.label.paddingNumber|Object(default: 0)
The padding of the label. A numeric value will set all paddings.
Example
<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.padding.bottomNumber(default: 0)
The bottom padding of the label.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}],
yAxis: {
plotBands: [{
from: 1,
to: 2,
label: {
text: "Target Range",
padding: {
bottom: 5
}
}
}]
}
});
</script>yAxis.plotBands.label.padding.leftNumber(default: 0)
The left padding of the label.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}],
yAxis: {
plotBands: [{
from: 1,
to: 2,
label: {
text: "Target Range",
padding: {
left: 5
}
}
}]
}
});
</script>yAxis.plotBands.label.padding.rightNumber(default: 0)
The right padding of the label.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}],
yAxis: {
plotBands: [{
from: 1,
to: 2,
label: {
text: "Target Range",
padding: {
right: 5
}
}
}]
}
});
</script>yAxis.plotBands.label.padding.topNumber(default: 0)
The top padding of the label.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}],
yAxis: {
plotBands: [{
from: 1,
to: 2,
label: {
text: "Target Range",
padding: {
top: 5
}
}
}]
}
});
</script>yAxis.plotBands.label.positionString(default: "center")
The position of the label.
The supported values are:
Example
<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.rotationNumber(default: 0)
The rotation angle of the label. By default the label is not rotated.
Example
<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.textString
The text of the label.
The text can be split into multiple lines by using line feed characters ("\n").
Example
<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.visibleBoolean(default: true)
If set to false the chart will not display the label.
Example
<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.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.Rectthat 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
<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>yAxis.plotBands.opacityNumber
The opacity of the plot band.
Example - set the scatter chart y axis plot band opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]]}
],
yAxis: {
plotBands: [
{ from: 1, to: 2, color: "red", opacity: 0.5 }
]
}
});
</script>yAxis.plotBands.toNumber
The end position of the plot band in axis units.
Example - set the scatter chart y axis plot band end position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]]}
],
yAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
}
});
</script>In this article