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

Custom Annotation Types

Updated on Mar 26, 2026

There are two types of custom annotations depending on the type of the chart that uses them - CartesianCustomAnnotation and PolarCustomAnnotation. This topic describes all of the properties that affect the custom annotations.

Custom Annotation Properties

The common properties for all custom annoations are:

Content: Gets or sets the content of the annotation.
ContentTemplate: Defines the DataTemplate used to display the content of the annotation.
HorizontalAlignment: Specifies where the content of the annotation will be rendered horizontally relative to the position associated with the annotation.
VerticalAlignment: Specifies where the content of the annotation will be rendered vertically relative to the position associated with the annotation.
HorizontalOffset: Specifies the horizontal pixel offset that is applied after the annotation is positioned on the plot (based on its Horizontal or Polar/Radial values).

This property is NOT applicable when the HorizontalAlignment property is set to Stretch.
VerticalOffset: Specifies the vertical pixel offset that is applied after the annotation is positioned on the plot (based on its Vertical or Polar/Radial values).

This property is NOT applicable when the VerticalAlignment property is set to Stretch.

CartesianCustomAnnotation Specific Properties

HorizontalAxis: Specifies the horizontal axis instance that will be used by the HorizontalValue property. By default the annotation takes the default HorizontalAxis defined by the chart.
VerticalAxis: Specifies the vertical axis instance that will be used by the VerticalValue property. By default the annotation takes the default VerticalAxis defined by the chart.
HorizontalValue: Specifies the place on the associated horizontal axis where the annotation is positioned.

When the axis is numerical (Linear or Logarithmic) a numeric value is expected, and when it is a CategoricalAxis - a category is expected.
VerticalValue: Specifies the place on the associated vertical axis where the annotation is positioned.

When the axis is numerical (Linear or Logarithmic) a numeric value is expected, and when it is a CategoricalAxis - a category is expected.

PolarCustomAnnotation Specific Properties

PolarValue: Specifies the place on the polar axis where the annotation is positioned.
RadialValue: Specifies the place on the radial axis where the annotation is positioned.

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

CartesianCustomAnnotation Example

Example 1 demonstrates how to add a CartesianCustomAnnotation with and without a ContentTemplate to a RadCartesianChart.

Example 1: CartesianCustomAnnotation

XAML

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
	xmlns:telerikCharting="using:Telerik.Charting">
	<telerikChart:RadCartesianChart Width="400" Height="250">
		<telerikChart:RadCartesianChart.Annotations>
			<telerikChart:CartesianCustomAnnotation HorizontalValue="1" VerticalValue="2" 
													Content="This is custom annotation without ContentTemplate" />
			<telerikChart:CartesianCustomAnnotation HorizontalValue="5" VerticalValue="8" 
													HorizontalAlignment="Center" VerticalAlignment="Center">
				<telerikChart:CartesianCustomAnnotation.ContentTemplate>
					<DataTemplate>
						<Border Width="100" Height="100" Background="#2090EE90" 
								BorderBrush="LightGreen" BorderThickness="1">
							<TextBlock Text="This is custom annotation with ContentTemplate" 
									TextWrapping="Wrap" TextAlignment="Center"
									VerticalAlignment="Center" HorizontalAlignment="Center"/>
						</Border>
					</DataTemplate>
				</telerikChart:CartesianCustomAnnotation.ContentTemplate>
			</telerikChart:CartesianCustomAnnotation>
		</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 CartesianCustomAnnotations

WinUI RadChart Cartesian Custom Annotation

PolarCustomAnnotation Example

Example 2 demonstrates how to add a PolarCustomAnnotation with and without ContentTemplate to a RadPolarChart.

Example 2: PolarCustomAnnotation

XAML

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
	  xmlns:telerikCharting="using:Telerik.Charting">
	<telerikChart:RadPolarChart Height="350">
		<telerikChart:RadPolarChart.Annotations>
			<telerikChart:PolarCustomAnnotation PolarValue="8" RadialValue="300"
												HorizontalAlignment="Right"
												VerticalAlignment="Center"
												HorizontalOffset="10"
												Content="Red Mark"/>
			<telerikChart:PolarCustomAnnotation PolarValue="8" RadialValue="300"
												HorizontalAlignment="Center"
												VerticalAlignment="Center">
				<telerikChart:PolarCustomAnnotation.Content>
					<Path Stroke="Tomato" StrokeThickness="2">
						<Path.Data>
							<PathGeometry>
								<PathGeometry.Figures>
									<PathFigure StartPoint="0,0">
										<LineSegment Point="10,10"/>
									</PathFigure>
									<PathFigure StartPoint="0,10">
										<LineSegment Point="10,0"/>
									</PathFigure>
								</PathGeometry.Figures>
							</PathGeometry>
						</Path.Data>
					</Path>
				</telerikChart:PolarCustomAnnotation.Content>
			</telerikChart:PolarCustomAnnotation>
			<telerikChart:PolarCustomAnnotation PolarValue="10" RadialValue="180"
												HorizontalAlignment="Right"
												VerticalAlignment="Bottom">
				<telerikChart:PolarCustomAnnotation.ContentTemplate>
					<DataTemplate>
						<Border Width="60" Height="60" Background="#2090EE90" 
								BorderBrush="LightGreen" BorderThickness="1">
							<TextBlock Text="Green Area" 
									TextWrapping="Wrap" TextAlignment="Center"
									VerticalAlignment="Center" 
									HorizontalAlignment="Center"/>
						</Border>
					</DataTemplate>
				</telerikChart:PolarCustomAnnotation.ContentTemplate>
			</telerikChart:PolarCustomAnnotation>
		</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="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 PolarCustomAnnotations

WinUI RadChart Polar Custom Annotation