New to Kendo UI for Angular? Start a free 30-day trial
Plot Bands
The Chart plot bands allow you to highlight a specific range of an axis.
Basics
To display plot bands, set the axis plotBands option to an array of PlotBand.
The following example demonstrates how to configure the plot bands of an axis.
Example
View Source
Change Theme:
Labels
Each plot band can be configured to display an optional label.
The following example demonstrates how to display and style plot band labels.
Example
View Source
Change Theme:
Custom Plot Bands
To visualize the range in a different way or to show additional elements, manually draw the plot bands by using the Drawing API in the render event.
To get the range coordinates:
The following example demonstrates how to draw custom plot bands.
Example
View Source
Change Theme:
Support and Learning Resources
- Chart Plot Bands Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Chart
- Axes
- Chart Area
- Crosshairs
- Error Bars
- Labels
- Legend
- Notes
- Panes
- Plot Area
- Selection
- Series
- Title
- Tooltip
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Virtual Classroom (Training Courses for Registered Users)
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base
