Annotations in UWP Charts (SfChart)

4 Dec 202224 minutes to read

SfChart supports Annotations, which allows you to mark the specific area of interest in the chart area. You can draw custom shapes, also text and images can be added using Annotations.

The following annotations are supported in SfChart

Adding Annotation

You can create an instance for any type of Annotation and add it to Annotations collection. Here for instance, the EllipseAnnotation is added.

XAML
C#
<syncfusion:SfChart.Annotations>

<syncfusion:EllipseAnnotation  X1="2.5" Y1="1500" 

Text="Ellipse Annotation"                                            

X2="3.6" Y2="1680" >

</syncfusion:EllipseAnnotation>            

</syncfusion:SfChart.Annotations>
EllipseAnnotation annotation=new EllipseAnnotation()
{

    X1 = 2.5, Y1 = 1500,

    X2 = 3.6, Y2 = 1680,

    Text = "Ellipse Annotation"

};

chart.Annotations.Add(annotation);

Annotation support in UWP Chart

Positioning the Annotation

Annotations can be positioned in plot area based on X1 and Y1 properties and for image and shape annotations you need to specify X2 and Y2 properties. These X and Y values can be specified with axis units or pixel units and this can be identified using CoordinateUnit property.

Positioning based on CoordinateUnit as Axis

To position based on axis you need to set the X1 and Y1, X2 and Y2 (if needed) properties based on the primary and secondary axis range values and CoordinateUnit as Axis.

Positioning based on CoordinateUnit as Pixels

To position based on the pixel values you have to set the CoordinateUnit as Pixel and the pixel values in X1 and Y1, X2 and Y2 properties in Annotation.

Adding Annotation for MultipleAxes

You can also add annotation for a particular axis when there is multiple axes using XAxisName and YAxisName properties as in the below code snippet.

XAML
C#
<Chart:SfChart>

<Chart:SfChart.RowDefinitions>

<Chart:ChartRowDefinition></Chart:ChartRowDefinition>

<Chart:ChartRowDefinition></Chart:ChartRowDefinition>

</Chart:SfChart.RowDefinitions>

<Chart:SfChart.PrimaryAxis>

<Chart:CategoryAxis/>

</Chart:SfChart.PrimaryAxis>

<Chart:SfChart.SecondaryAxis>

<Chart:NumericalAxis  

x:Name="FirstYAxis"                                         

Chart:ChartBase.Row="0"/>

</Chart:SfChart.SecondaryAxis>      

<Chart:SfChart.Annotations>

<Chart:HorizontalLineAnnotation X1="-0.5" X2="3.5"

Stroke="DarkGray"

StrokeThickness="2" 

LineCap="Arrow"

CanDrag="True" CanResize="True"

YAxisName="FirstYAxis"

Y1="500">                    

</Chart:HorizontalLineAnnotation>               

<Chart:RectangleAnnotation  X1="0.6" CanDrag="True" CanResize="True"                                

X2="2.2" Y2="1500" Y1="1800" 

Stroke="DarkGray"

Fill="LightGray"

Opacity="0.5"

YAxisName="SecondYAxis">            

</Chart:RectangleAnnotation>

</Chart:SfChart.Annotations>

<Chart:ColumnSeries  Label="2011" Interior="#777777"

ItemsSource="{Binding Demands}" 

XBindingPath="Demand"      

YBindingPath="Year2011"/>

<Chart:ScatterSeries  Interior="#777777" ItemsSource="{Binding Demands}" 

XBindingPath="Demand"  YBindingPath="Year2010">

<Chart:ScatterSeries.YAxis>

<Chart:NumericalAxis x:Name="SecondYAxis"    

LabelTemplate="{StaticResource label}" TickLineSize="5" 

MajorTickLineStyle="{StaticResource tick}" Minimum="0" Maximum="2000" Interval="500"                                              

AxisLineStyle="{StaticResource axis}" ShowGridLines="False"

Chart:ChartBase.Row="1"></Chart:NumericalAxis>

</Chart:ScatterSeries.YAxis>

</Chart:ScatterSeries>
SfChart chart = new SfChart();

chart.RowDefinitions.Add(new ChartRowDefinition());

chart.RowDefinitions.Add(new ChartRowDefinition());

chart.PrimaryAxis = new CategoryAxis();

chart.SecondaryAxis = new NumericalAxis();

ChartBase.SetRow(chart.SecondaryAxis, 0);

HorizontalLineAnnotation annotation = new HorizontalLineAnnotation()
{

    X1 = -0.5, Y1 = 500,

    X2 = 3.5,

    Stroke = new SolidColorBrush(Colors.DarkGray),

    StrokeThickness = 2,

    LineCap = LineCap.Arrow,

    CanDrag = true,

    CanResize = true,

    YAxisName = "FirstYAxis"

};

RectangleAnnotation annotation1 = new RectangleAnnotation()
{

    X1 = 0.6,Y1 = 1500,

    X2 = 2.2,Y2=1800,

    Stroke = new SolidColorBrush(Colors.DarkGray),

    Fill = new SolidColorBrush(Colors.LightGray),

    StrokeThickness = 2,

    Opacity = 0.5,

    CanDrag = true,

    CanResize = true,

    YAxisName = "SecondYAxis"

};

chart.Annotations.Add(annotation);

chart.Annotations.Add(annotation1);

ColumnSeries columnSeries = new ColumnSeries()
{

    ItemsSource = new ViewModel().Demands,

    XBindingPath = "Demand",

    YBindingPath = "Year2011",

    Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))

};

ScatterSeries scatterSeries = new ScatterSeries()
{

    ItemsSource = new ViewModel().Demands,

    XBindingPath = "Demand",

    YBindingPath = "Year2010",

    Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))

};

NumericalAxis axis = new NumericalAxis()
{

    Minimum = 0,

    Maximum = 2000,

    Interval = 500,

    ShowGridLines = false,

    TickLineSize = 5,

    LabelTemplate = chart.Resources["labelTemplate"] as DataTemplate,

    MajorTickLineStyle = chart.Resources["lineStyle1"] as Style,

    AxisLineStyle = chart.Resources["lineStyle2"] as Style

};

ChartBase.SetRow(axis, 1);

scatterSeries.YAxis = axis;

chart.Series.Add(columnSeries);

chart.Series.Add(scatterSeries);

Multiple axis support for annotation in UWP Chart

Aligning the Annotation

You can align the annotation horizontally and vertically from its actual plotting position using the HorizontalAlignment and VerticalAlignment properties as in the following code sample.

Annotations in UWP Charts (SfChart)

Adding Annotation

Positioning the Annotation

Aligning the Annotation

Text Annotation

Rotate the Text Annotation

Editing Text Annotation

Shape Annotation

Customization options for LineAnnotation

Adding Text in ShapeAnnotation

Aligning Text in ShapeAnnotation

Customization of ShapeAnnotation

Image Annotation

Interactivity

ToolTip

Drag and Resize the Annotation

Annotation Clipping

Customizing Text in Annotation

Events