Introduction
Contribution
Knowledge Base
Chart

valueAxis.plotBandsArray

The plot bands of the value axis.

Example - set the value plot bands 

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

valueAxis.plotBands.colorString

The color of the plot band.

Example - set the value plot band color 

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

valueAxis.plotBands.fromNumber

The start position of the plot band in axis units.

Example - set the value plot band start position 

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

valueAxis.plotBands.labelObject

The label configuration of the plotband.

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

Example 

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

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

valueAxis.plotBands.label.borderObject

The border of the label.

Example 

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

valueAxis.plotBands.label.border.dashTypeString(default: "solid")

The dash type of the border.

The following dash types are supported:

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

Example 

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

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

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

valueAxis.plotBands.label.fontString(default: "16px Arial,Helvetica,sans-serif")

The font style of the label.

Example 

<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.marginNumber|Object(default: 5)

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

Example 

<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.margin.bottomNumber(default: 0)

The bottom margin of the label.

Example 

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

valueAxis.plotBands.label.margin.leftNumber(default: 0)

The left margin of the label.

Example 

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

valueAxis.plotBands.label.margin.rightNumber(default: 0)

The right margin of the label.

Example 

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

valueAxis.plotBands.label.margin.topNumber(default: 0)

The top margin of the label.

Example 

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

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

valueAxis.plotBands.label.padding.bottomNumber(default: 0)

The bottom padding of the label.

Example 

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

valueAxis.plotBands.label.padding.leftNumber(default: 0)

The left padding of the label.

Example 

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

valueAxis.plotBands.label.padding.rightNumber(default: 0)

The right padding of the label.

Example 

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

valueAxis.plotBands.label.padding.topNumber(default: 0)

The top padding of the label.

Example 

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

valueAxis.plotBands.label.positionString(default: "center")

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

Example 

<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.rotationNumber(default: 0)

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

Example 

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

valueAxis.plotBands.label.visibleBoolean(default: true)

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

Example 

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

Example 

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

valueAxis.plotBands.opacityNumber

The opacity of the plot band.

Example - set the value plot band opacity 

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

valueAxis.plotBands.toNumber

The end position of the plot band in axis units.

Example - set the value plot band end position 

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis:  {
    plotBands: [
      { from: 1, to: 2, color: "red" }
    ]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>
In this article
valueAxis.plotBandsvalueAxis.plotBands.colorvalueAxis.plotBands.fromvalueAxis.plotBands.labelvalueAxis.plotBands.label.alignvalueAxis.plotBands.label.backgroundvalueAxis.plotBands.label.bordervalueAxis.plotBands.label.border.colorvalueAxis.plotBands.label.border.dashTypevalueAxis.plotBands.label.border.widthvalueAxis.plotBands.label.colorvalueAxis.plotBands.label.fontvalueAxis.plotBands.label.marginvalueAxis.plotBands.label.margin.bottomvalueAxis.plotBands.label.margin.leftvalueAxis.plotBands.label.margin.rightvalueAxis.plotBands.label.margin.topvalueAxis.plotBands.label.paddingvalueAxis.plotBands.label.padding.bottomvalueAxis.plotBands.label.padding.leftvalueAxis.plotBands.label.padding.rightvalueAxis.plotBands.label.padding.topvalueAxis.plotBands.label.positionvalueAxis.plotBands.label.rotationvalueAxis.plotBands.label.textvalueAxis.plotBands.label.visiblevalueAxis.plotBands.label.visualvalueAxis.plotBands.opacityvalueAxis.plotBands.to
Not finding the help you need?
Contact Support