New to Telerik UI for WinUI? Download free 30-day trial

PlotBand Annotation Types

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

<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 MajorLinesVisibility="XY" /> 
        </telerikChart:RadCartesianChart.Grid> 
    </telerikChart:RadCartesianChart> 
</Grid> 

Figure 1: RadCartesianChart with vertical and horizontal CartesianPlotBandAnnotations

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

<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

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

<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

Radial Axis Plot Band Annotation

See Also

In this article
Not finding the help you need?