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

GridLine Annotation Types

Updated on Mar 26, 2026

This article describes the properties of the GridLineAnnotations depending on the type of axis the annotation is associated with - cartesian, polar or radial.

GridLine Annotation Properties

The common properties for all GridLineAnnotations are:

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

CartesianGridLineAnnotation Specific Properties

Axis (CartesianAxis): The CartesianGridLineAnnotation needs to be associated with horizontal or vertical cartesian axis explicitly.
Value (object): The place on the associated axis where a line crosses it.

When the associated 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.

PolarAxisGridLineAnnotation Specific Properties

Value (double): Specifies the location on the polar axis (the radius), where the circular grid line crosses it.

RadialAxisGridLineAnnotation Specific Properties

Value (object): Specifies the location (angle or category) on the radial axis, where the grid line is drawn.

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

Example of CartesianGridLineAnnotation

In the case of the RadCartesianChart, the GridLine represents a vertical or horizontal line that crosses the entire plot area. Example 1 demonstrates how to define both a horizontal and a vertical CartesianGridLineAnnotation in a RadCartesianChart.

Example 1: CartesianGridLineAnnotation

XAML

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
	  xmlns:telerikCharting="using:Telerik.Charting">
	<telerikChart:RadCartesianChart x:Name="cartesianChart" Width="400" Height="250">
		<telerikChart:RadCartesianChart.Annotations>
			<telerikChart:CartesianGridLineAnnotation 
				Axis="{Binding ElementName=cartesianChart, Path=VerticalAxis}" 
				Value="6" Stroke="LightGreen" StrokeThickness="3"/>
			<telerikChart:CartesianGridLineAnnotation 
				Axis="{Binding ElementName=cartesianChart, Path=HorizontalAxis}" 
				Value="2.8" Stroke="Tomato" StrokeThickness="3"/>
		</telerikChart:RadCartesianChart.Annotations>
	
		<telerikChart:RadCartesianChart.HorizontalAxis>
			<telerikChart:LinearAxis />
		</telerikChart:RadCartesianChart.HorizontalAxis>
		<telerikChart:RadCartesianChart.VerticalAxis>
			<telerikChart:LinearAxis/>
		</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 horizontal and vertical annotations

WinUI RadChart Cartesian Grid Line Annotation

Example of PolarAxisGridLineAnnotation

PolarAxisGridLineAnnotation is represented by concentric circles that cross the radial axis at a specific Value. Example 2 demonstrates how to define PolarAxisGridLineAnnotation in a RadPolarChart.

Example 2: PolarAxisGridLineAnnotation

XAML

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
	  xmlns:telerikCharting="using:Telerik.Charting">
	<telerikChart:RadPolarChart Height="350">
		<telerikChart:RadPolarChart.Annotations>
			<telerikChart:PolarAxisGridLineAnnotation Value="4" StrokeThickness="2" Stroke="Tomato"/>
			<telerikChart:PolarAxisGridLineAnnotation Value="8" StrokeThickness="2" Stroke="LightGreen"/>
			<telerikChart:PolarAxisGridLineAnnotation Value="10" StrokeThickness="2" Stroke="LightBlue"/>
		</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>

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
	 xmlns:telerikCharting="using:Telerik.Charting">
	<telerikChart:RadPolarChart  Height="350">
		<telerikChart:RadPolarChart.Annotations>
			<telerikChart:RadialAxisGridLineAnnotation Value="70" StrokeThickness="2" Stroke="Tomato"/>
			<telerikChart:RadialAxisGridLineAnnotation Value="80" StrokeThickness="2" Stroke="LightGreen"/>
			<telerikChart:RadialAxisGridLineAnnotation Value="130" StrokeThickness="2" Stroke="LightBlue"/>
		</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="8" Angle="30" />
				<telerikCharting:PolarDataPoint Value="7" 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 RadialAxisGridLineAnnotation

WinUI RadChart Radial Axis Grid Line Annotation