New to Telerik UI for WinUIStart a free 30-day trial

PlotBand Annotation Types

Updated on Mar 26, 2026

In this article the properties of the PlotBandAnnotations are described depending on the type of axis the annotation is associated with - cartesian, polar or radial.

PlotBand Annotation Properties

The common properties for all PlotBandAnnotations are:

  • Fill: Gets or sets the Brush that specifies how the shape's interior is painted.
  • StrokeDashArray: Gets or sets a collection of double values that indicates the pattern of dashes and gaps that is used to outline stroked annotation.
  • Stroke: Gets or sets the Brush that specifies how the shape outline is painted.
  • StrokeThickness: Gets or sets the width of the shape stroke outline.

CartesianPlotBandAnnotation Specific Properties

  • Axis: The cartesian plotband annotation needs to be associated with the horizontal or vertical axis explicitly.

  • From (of type object): The starting value for the plotband.

    When the axis is numerical (Linear or Logarithmic) a numeric value is expected, and when it is a CategoricalAxis - a category is expected.

  • To (of type object): The ending value for the plotband.

    When the axis is numerical (Linear or Logarithmic) a numeric value is expected, and when it is a CategoricalAxis - a category is expected.

  • Label (string): The string that defines the label of the annotation. By default it is null.

  • LabelDefinition (ChartAnnotationLabelDefinition): Defines the position of the annotation label. Check the Annotation Labels topic for more details.

PolarAxisPlotBandAnnotation Specific Properties

  • From (of type double): The starting point for the plotband.
  • To (of type double): The ending point for the plotband.

RadialAxisPlotBandAnnotation Specific Properties

  • From (of type object): The starting point for the plotband.

    When the radial axis is a NumericalRadialAxis a numeric value is expected, and when it is a CategoricalRadialAxis - a category.

  • To (of type object): the ending point for the plotband.

    When the radial axis is a NumericalRadialAxis a numeric value is expected, and when it is a CategoricalRadialAxis - a category.

Example of CartesianPlotBandAnnotations

CartesianPlotbandAnnotation can be either a horizontal or a vertical stripe that crosses the whole chart and marks a value range on the associate axis. Example 1 demonstrates how to define both a horizontal and vertical CartesianPlotBandAnnotation in a RadCartesianChart.

Example 1: CartesianPlotbandAnnotation

XAML
<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
	xmlns:telerikCharting="using:Telerik.Charting">
	<telerikChart:RadCartesianChart Width="400" Height="300">
		<telerikChart:RadCartesianChart.Annotations>
			<telerikChart:CartesianPlotBandAnnotation Axis="{Binding ElementName=horizontalAxis}" 
													From="1.8" To="2.8" 
													Stroke="LightGreen" StrokeThickness="1" Fill="#2090EE90"/>
			<telerikChart:CartesianPlotBandAnnotation Axis="{Binding ElementName=verticalAxis}" 
													From="3" To="5" 
													Stroke="Tomato" StrokeThickness="1" Fill="#20FF6347"/>
		</telerikChart:RadCartesianChart.Annotations>
		<telerikChart:RadCartesianChart.HorizontalAxis>
			<telerikChart:LinearAxis x:Name="horizontalAxis"/>
		</telerikChart:RadCartesianChart.HorizontalAxis>
		<telerikChart:RadCartesianChart.VerticalAxis>
			<telerikChart:LinearAxis x:Name="verticalAxis"/>
		</telerikChart:RadCartesianChart.VerticalAxis>
		<telerikChart:ScatterPointSeries>
			<telerikChart:ScatterPointSeries.DataPoints>
				<telerikCharting:ScatterDataPoint XValue="1" YValue="1" />
				<telerikCharting:ScatterDataPoint XValue="5" YValue="3" />
				<telerikCharting:ScatterDataPoint XValue="8" YValue="11" />
			</telerikChart:ScatterPointSeries.DataPoints>
		</telerikChart:ScatterPointSeries>
		<telerikChart:RadCartesianChart.Grid>
			<telerikChart:CartesianChartGrid MajorGridLinesVisibility="XY" />
		</telerikChart:RadCartesianChart.Grid>
	</telerikChart:RadCartesianChart>
</Grid>

Figure 1: RadCartesianChart with vertical and horizontal CartesianPlotBandAnnotations

WinUI RadChart Cartesian Plot Band Annotation

Example of PolarAxisPlotBandAnnotation

PolarAxisPlotBandAnnotation is represented by concentric stripe that mark a specific value (radius) range on the polar axis. Example 2 demonstrates how to define PolarAxisPlotBandAnnotation in a RadPolarChart.

Example 2: PolarAxisPlotBandAnnotation

XAML
<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
	  xmlns:telerikCharting="using:Telerik.Charting">
	<telerikChart:RadPolarChart Height="350">
		<telerikChart:RadPolarChart.Annotations>
		<telerikChart:PolarAxisPlotBandAnnotation From="2.8" To="4.8" Stroke="Tomato" Fill="#20FF6347"/>
		<telerikChart:PolarAxisPlotBandAnnotation From="7" To="9.5" Stroke="LightGreen" Fill="#2090EE90"/>
	</telerikChart:RadPolarChart.Annotations>
	<telerikChart:RadPolarChart.RadialAxis>
		<telerikChart:NumericalRadialAxis/>
	</telerikChart:RadPolarChart.RadialAxis>
	<telerikChart:RadPolarChart.PolarAxis>
		<telerikChart:PolarAxis/>
	</telerikChart:RadPolarChart.PolarAxis>
	<telerikChart:PolarPointSeries>
		<telerikChart:PolarPointSeries.DataPoints>
			<telerikCharting:PolarDataPoint Value="1" Angle="15" />
			<telerikCharting:PolarDataPoint Value="5" Angle="200" />
			<telerikCharting:PolarDataPoint Value="11" Angle="300" />
		</telerikChart:PolarPointSeries.DataPoints>
	</telerikChart:PolarPointSeries>
		<telerikChart:RadPolarChart.Grid>
			<telerikChart:PolarChartGrid GridLineVisibility="Both" />
		</telerikChart:RadPolarChart.Grid>
	</telerikChart:RadPolarChart>
</Grid>

Figure 2: RadPolarChart with several PolarAxisPlotBandAnnotation

WinUI RadChart Polar Axis Plot Band Annotation

Example of RadialAxisPlotBandAnnotation

RadialAxisPlotBandAnnotation is represented by a sector of the circle (pie slice) that marks specific angular/categorical range. Example 3 demonstrates how to define a RadialAxisPlotBandAnnotation in a RadPolarChart.

Example 3: RadialAxisPlotBandAnnotation

XAML
<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
	  xmlns:telerikCharting="using:Telerik.Charting">
	<telerikChart:RadPolarChart Height="350">
		<telerikChart:RadPolarChart.Annotations>
			<telerikChart:RadialAxisPlotBandAnnotation From="10" To="50"  Stroke="LightGreen" StrokeThickness="1" Fill="#2090EE90"/>
			<telerikChart:RadialAxisPlotBandAnnotation From="120" To="160"  Stroke="Tomato" StrokeThickness="1" Fill="#20FF6347"/>
		</telerikChart:RadPolarChart.Annotations>
		<telerikChart:RadPolarChart.RadialAxis>
			<telerikChart:NumericalRadialAxis/>
		</telerikChart:RadPolarChart.RadialAxis>
		<telerikChart:RadPolarChart.PolarAxis>
			<telerikChart:PolarAxis/>
		</telerikChart:RadPolarChart.PolarAxis>
		<telerikChart:PolarPointSeries>
			<telerikChart:PolarPointSeries.DataPoints>
				<telerikCharting:PolarDataPoint Value="1" Angle="15" />
				<telerikCharting:PolarDataPoint Value="5" Angle="200" />
				<telerikCharting:PolarDataPoint Value="11" Angle="300" />
			</telerikChart:PolarPointSeries.DataPoints>
		</telerikChart:PolarPointSeries>
		<telerikChart:RadPolarChart.Grid>
			<telerikChart:PolarChartGrid GridLineVisibility="Both" />
		</telerikChart:RadPolarChart.Grid>
	</telerikChart:RadPolarChart>
</Grid>

Figure 3: RadPolarChart with several RadialAxisPlotBandAnnotations

WinUI RadChart Radial Axis Plot Band Annotation

See Also