# GridLine Annotation Types

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](https://www.telerik.com/winui/documentation/controls/radchart/annotations/chart-labels)** (ChartAnnotationLabelDefinition): Defines the position of the annotation label. Check the [Annotation Labels](https://www.telerik.com/winui/documentation/controls/radchart/annotations/chart-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](https://www.telerik.com/winui/documentation/assets/7f48f95bce7f3e7edc342559c2c2d81b/cartesiangridlineannotation.png)

## 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>
```

#### **Figure 2: RadPolarChart with several PolarAxisGridLineAnnotations**

![WinUI RadChart Polar Axis Grid Line Annotation](https://www.telerik.com/winui/documentation/assets/c6ccb46d37faad48b6c8370ac9aee50d/polaraxisgridlineannotation.png)

## Example of RadialAxisGridLineAnnotation

**PolarAxisGridLineAnnotation** is represented by lines along the radius of the **PolarChart**. **Example 3** demonstrates how to define a **PolarAxisGridLineAnnotation** in a **RadPolarChatr**.

#### **Example 3: RadialAxisGridLineAnnotation**

```XAML
<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](https://www.telerik.com/winui/documentation/assets/f635df285ddea6ccfa6c7f8108dc1e1f/radialaxisgridlineannotation.png)

## See Also

* [Overview](https://www.telerik.com/winui/documentation/controls/radchart/annotations/chart-overview)
* [PlotBand Annotation Types](https://www.telerik.com/winui/documentation/controls/radchart/annotations/chart-plotband-types)
* [Custom Annotation Types](https://www.telerik.com/winui/documentation/controls/radchart/annotations/chart-custom-types)
* [Annotation Labels](https://www.telerik.com/winui/documentation/controls/radchart/annotations/chart-labels)