# 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/plotband).

The following example demonstrates how to configure the plot bands of an axis.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/plot-bands/source.txt)

## Labels

Each plot band can be configured to display an optional [label](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/plotband).

The following example demonstrates how to display and style plot band labels.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/plotbands/labels/source.txt)

## 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](https://www.telerik.com/kendo-angular-ui-develop/components/drawing) in the [`render`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#render) event.

To get the range coordinates:

1. [Find](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#findaxisbyname) the [axis](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartaxis) by name.
2. Use the [`slot`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartaxis#slot) method.

The following example demonstrates how to draw custom plot bands.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/plot-bands/custom/source.txt)

## Support and Learning Resources

* [Chart Plot Bands Homepage](https://www.telerik.com/kendo-angular-ui/charts#plot-bands)
* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started)
* [API Reference of the Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [Axes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/axes)
* [Chart Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/chart-area)
* [Crosshairs](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs)
* [Error Bars](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs)
* [Labels](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels)
* [Legend](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/legend)
* [Notes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/notes)
* [Panes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/panes)
* [Plot Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-area)
* [Selection](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/selection)
* [Series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/series)
* [Title](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/title)
* [Tooltip](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/tooltips)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)