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

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 (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

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

Figure 1: RadCartesianChart with horizontal and vertical annotations

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

<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

Polar Axis Grid Line Annotation

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

<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

Radial Axis Grid Line Annotation

See Also

In this article
Not finding the help you need?