GridLine Annotation Types
In this article the properties of the GridLineAnnotations are described depending on the type of axis the annotation is associated with - cartesian, polar or radial.
GridLine Annotation Properties
Common properties
- DashArray (DoubleCollection)
- Stroke (Brush)
- StrokeThickness (double)
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 CartesianChart, the GridLine represents a vertical or horizontal line that crosses the entire plot area. Here is an example that demonstrates how to define both horizontal and vertical CartesianGridLineAnnotation in a RadCartesianChart.
This is the definition of the chart:
<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>
Example of PolarAxisGridLineAnnotation
PolarAxisGridLineAnnotation is represented by concentric circles that cross the radial axis at specific Value. This example demonstrates how to define PolarAxisGridLineAnnotation in a RadPolarChart.
This is the definition of the chart:
<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>
Example of RadialAxisGridLineAnnotation
PolarAxisGridLineAnnotation is represented by lines along the radius of the PolarChart. Here is an example that demonstrates how to define PolarAxisGridLineAnnotation in a RadPolarChatr.
This is the definition of the chart:
<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>