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.

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
Edit In Stackblitz  
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.

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:

  1. Find the axis by name.
  2. Use the slot method.

The following example demonstrates how to draw custom plot bands.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?