Annotation in Xamarin.Android Chart

3 Sep 2020 / 19 minutes to read

SfChart supports annotations, which allows you to mark the specific area of interest in the chart area. You can add text, images and custom views.

The following annotations are supported in SfChart

  • Text annotation
  • Shape annotation
  • View annotation

Adding Annotations

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

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    EllipseAnnotation annotation = new EllipseAnnotation()
    {
        X1 = 2,
    
        Y1 = 35,
    
        X2 = 6,
    
        Y2 = 40,
    
        Text = "Ellipse"
    };
    
    chart.Annotations.Add(annotation);

    Annotation support in Xamarin.Android Chart

    Positioning the annotation

    Annotations can be positioned in plot area based on X1 and Y1 properties. For shape annotations, specify X2 and Y2 properties, if needed. The X and Y values can be specified with axis units or pixel units, and these can be identified by using CoordinateUnit property.

    Positioning based on CoordinateUnit as axis

    To position the annotation based on an axis, set the X1 and Y1, X2 and Y2 properties based on axis range values, if needed, and then set the CoordinateUnit value as Axis.

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    RectangleAnnotation annotation = new RectangleAnnotation()
    {
        X1 = 4,
    
        Y1 = 40,
    
        X2 = 8,
    
        Y2 = 45,
    
        Text = "Axis Value",
    
        CoordinateUnit = ChartCoordinateUnit.Axis
    };
    
    chart.Annotations.Add(annotation);

    Positioning the Xamarin.Android Chart annotation based on axis coordinates

    Positioning based on CoordinateUnit as pixels

    To position the annotations based on the pixel values, set the CoordinateUnit value as Pixels. The pixel values in X1 and Y1, X2 and Y2 properties of an annotation are shown in the following code snippet,

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    RectangleAnnotation annotation = new RectangleAnnotation()
    {
        X1 = 1,
    
        Y1 = 1,
    
        X2 = 150,
    
        Y2 = 150,
    
        Text = "Pixel Value",
    
        CoordinateUnit = ChartCoordinateUnit.Pixels
    };
    
    chart.Annotations.Add(annotation);

    Positioning the Xamarin.Android Chart annotation based on pixel coordinates

    Adding annotation for multiple axes

    When there are multiple axes, annotations can be added for a particular axis by using XAxisName and YAxisName properties. The following code snippet illustrates this,

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    EllipseAnnotation annotation = new EllipseAnnotation()
    {
        X1 = 4,
    
        Y1 = 30,
    
        X2 = 8,
    
        Y2 = 35,
    
        YAxisName = "YAxis"
    };
    
    chart.Annotations.Add(annotation);
    
    SplineSeries series = new SplineSeries();
    
    series.XBindingPath = "Name";
    
    series.YBindingPath = "Value";
    
    series.ItemsSource = model.Data;
    
    series.YAxis = new NumericalAxis()
    {
        OpposedPosition = true,
    
        Name = "YAxis"
    };
    
    chart.Series.Add(series);

    Multiple axis support for annotation in Xamarin.Android Chart

    Text annotation

    TextAnnotation is used to add simple text with the help of Text property in specific points over the chart area.

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    TextAnnotation annotation = new TextAnnotation()
    {
        X1 = 7,
    
        Y1 = 35,
    
        Text = "August"
    };
    
    chart.Annotations.Add(annotation);

    Text annotation support in Xamarin.Android Chart

    Customizing text annotation

    The TextAnnotation can be customized by using LabelStyle property. The following properties are used to customize the text:

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    TextAnnotation annotation = new TextAnnotation()
    {
        X1 = 7,
    
        Y1 = 35,
    
        Text = "August"
    };
    
    annotation.LabelStyle.MarginTop = 5;
    
    annotation.LabelStyle.MarginLeft = 5;
    
    annotation.LabelStyle.MarginRight = 5;
    
    annotation.LabelStyle.MarginBottom = 5;
    
    annotation.LabelStyle.TextSize = 16;
    
    annotation.LabelStyle.Typeface = Typeface.DefaultFromStyle(TypefaceStyle.Italic);
    
    annotation.LabelStyle.StrokeColor = Color.Red;
    
    annotation.LabelStyle.StrokeWidth = 2;
    
    annotation.LabelStyle.BackgroundColor = Color.Teal;
    
    annotation.LabelStyle.TextColor = Color.White;
    
    annotation.LabelStyle.VerticalLabelAlignment = ChartAnnotationAlignment.Start;
    
    chart.Annotations.Add(annotation);

    Customizing text annotation support in Xamarin.Android Chart

    Shape annotation

    ShapeAnnotation allows you to add annotations in the form of shapes such as rectangle, ellipse, horizontal line, vertical line, etc., at the specific area of interest in the chart area.

    The following APIs are commonly used in all ShapeAnnotation:

    • X2 – Represents the X2 coordinate of the shape annotation.
    • Y2 – Represents the Y2 coordinate of the shape annotation.
    • FillColor – Represents the inside background color of the shape annotation.
    • StrokeColor – Represents the stroke color of the shape annotation.
    • StrokeWidth – Represents the stroke width of the shape annotation.
    • StrokeDashArray – Represents the stroke dashes of the shape annotation.
    • Text – Represents the text of the shape annotation.
    • LabelStyle – Represents the style for customizing the annotation text of shape annotation.

    Rectangle annotation

    The RectangleAnnotation is used to draw a rectangle or a square in specific points over the chart area. You can customize the rounded corners of the rectangle using CornerRadius property.

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    RectangleAnnotation annotation = new RectangleAnnotation()
    {
        X1 = 4,
    
        Y1 = 20,
    
        X2 = 6,
    
        Y2 = 55,
    };
    
    chart.Annotations.Add(annotation);

    Rectangle annotation support in Xamarin.Android Chart

    Ellipse annotation

    The EllipseAnnotation is used to draw an oval or a circle in specific points over the chart area. You can also specify the height and width of EllipseAnnotation by using Height and Width properties, respectively.

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    EllipseAnnotation annotation = new EllipseAnnotation()
    {
        X1 = 6,
    
        Y1 = 32,
    
        Height = 30,
    
        Width = 30
    };
    
    chart.Annotations.Add(annotation);

    Ellipse annotation support in Xamarin.Android Chart

    NOTE

    When X2 and Y2 properties of EllipseAnnotation are set, the Height and Width properties do not work.

    Line annotation

    The LineAnnotation is used to draw a line in specific points over the chart area.

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    LineAnnotation annotation = new LineAnnotation()
    {
        X1 = 2,
    
        Y1 = 35,
    
        X2 = 8,
    
        Y2 = 45,
    
        Text = "Line"
    
    };
    
    chart.Annotations.Add(annotation);

    Line annotation support in Xamarin.Android Chart

    Adding arrow to line annotation

    To display the single headed arrow, set the LineCap property to Arrow. The default value of the LineCap property is None.

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    LineAnnotation annotation = new LineAnnotation()
    {
        X1 = 2,
    
        Y1 = 40,
    
        X2 = 10,
    
        Y2 = 40,
    
        LineCap = ChartLineCap.Arrow
    };
    
    chart.Annotations.Add(annotation);

    Arrow support for line annotation in Xamarin.Android Chart

    Vertical and horizontal line annotations

    The VerticalLineAnnotation and HorizontalLineAnnotation properties are used to draw the vertical and horizontal lines in specific points over the chart area.

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    VerticalLineAnnotation vertical = new VerticalLineAnnotation()
    {
        X1 = 6
    };
    
    chart.Annotations.Add(vertical);
    
    HorizontalLineAnnotation horizontal = new HorizontalLineAnnotation()
    {
        Y1 = 35
    };
    
    chart.Annotations.Add(horizontal);

    Vertical and Horizontal line annotation support in Xamarin.Android Chart

    Displaying axis labels for vertical and horizontal line annotations

    The VerticalLineAnnotation and HorizontalLineAnnotation properties display the axis labels in which the line is placed. Default value of ShowAxisLabel property is false. This feature can be enabled by setting ShowAxisLabel property to true as shown in the following code snippet,

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    VerticalLineAnnotation vertical = new VerticalLineAnnotation()
    {
        X1 = 6,
    
        ShowAxisLabel = true
    };
    
    chart.Annotations.Add(vertical);
    
    HorizontalLineAnnotation horizontal = new HorizontalLineAnnotation()
    {
        Y1 = 35,
    
        ShowAxisLabel = true
    };
    
    chart.Annotations.Add(horizontal);

    Displaying axis label for vertical and horizontal line annotations in Xamarin.Android Chart

    Customizing the axis label

    The default appearance of the axis labels can be customized by using AxisLabelStyle property. The following properties of AxisLabelStyle are used to customize the axis label:

    • TextColor – Used to change the color of the text.
    • BackgroundColor – Used to change the background color of the text.
    • StrokeColor – Used to change the border color.
    • StrokeWidth – Used to change the width of the border.
    • TextSize – Used to change the text size.
    • Typeface – Used to change the font family and font weight.
    • MarginTop – Used to change the top margin of the text.
    • MarginBottom – Used to change the bottom margin of the text.
    • MarginLeft – Used to change the left margin of the text.
    • MarginRight – Used to change the right margin of the text.
  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    VerticalLineAnnotation vertical = new VerticalLineAnnotation()
    {
        X1 = 6,
    
        ShowAxisLabel = true
    };
    
    vertical.AxisLabelStyle.MarginTop = 5;
    
    vertical.AxisLabelStyle.MarginLeft = 5;
    
    vertical.AxisLabelStyle.MarginRight = 5;
    
    vertical.AxisLabelStyle.MarginBottom = 5;
    
    vertical.AxisLabelStyle.TextSize = 12;
    
    vertical.AxisLabelStyle.Typeface = Typeface.DefaultFromStyle(TypefaceStyle.Italic);
    
    vertical.AxisLabelStyle.StrokeColor = Color.Blue;
    
    vertical.AxisLabelStyle.StrokeWidth = 2;
    
    vertical.AxisLabelStyle.BackgroundColor = Color.Red;
    
    vertical.AxisLabelStyle.TextColor = Color.White;
    
    chart.Annotations.Add(vertical);
    
    HorizontalLineAnnotation horizontal = new HorizontalLineAnnotation()
    {
        Y1 = 35,
    
        ShowAxisLabel = true
    };
    
    horizontal.AxisLabelStyle.MarginTop = 5;
    
    horizontal.AxisLabelStyle.MarginLeft = 5;
    
    horizontal.AxisLabelStyle.MarginRight = 5;
    
    horizontal.AxisLabelStyle.MarginBottom = 5;
    
    horizontal.AxisLabelStyle.TextSize = 12;
    
    horizontal.AxisLabelStyle.Typeface = Typeface.DefaultFromStyle(TypefaceStyle.Italic);
    
    horizontal.AxisLabelStyle.StrokeColor = Color.Blue;
    
    horizontal.AxisLabelStyle.StrokeWidth = 2;
    
    horizontal.AxisLabelStyle.BackgroundColor = Color.Red;
    
    horizontal.AxisLabelStyle.TextColor = Color.White;
    
    chart.Annotations.Add(horizontal);

    Customizing axis label in Xamarin.Android Chart

    Adding arrow to vertical and horizontal line annotations

    To display the single headed arrow, set the LineCap property to Arrow. The default value of the LineCap property is None.

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    VerticalLineAnnotation vertical = new VerticalLineAnnotation()
    {
        X1 = 6,
    
        LineCap = ChartLineCap.Arrow
    };
    
    chart.Annotations.Add(vertical);
    
    HorizontalLineAnnotation horizontal = new HorizontalLineAnnotation()
    {
        Y1 = 35,
    
        LineCap = ChartLineCap.Arrow
    };
    
    chart.Annotations.Add(horizontal);

    Arrow support for vertical and horizontal line annotations in Xamarin.Android Chart

    Adding text in shape annotation

    For all the shape annotations, the text can be displayed by using the Text property.

    Customizing text in shape annotation

    The Text in shape annotation also can be customized by using the LabelStyle property. The following properties are used to customize the text:

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    EllipseAnnotation annotation = new EllipseAnnotation()
    {
        X1 = 2,
    
        Y1 = 30,
    
        X2 = 6,
    
        Y2 = 35,
    
        Text = "Ellipse"
    };
    
    annotation.LabelStyle.MarginTop = 5;
    
    annotation.LabelStyle.MarginLeft = 5;
    
    annotation.LabelStyle.MarginRight = 5;
    
    annotation.LabelStyle.MarginBottom = 5;
    
    annotation.LabelStyle.TextSize = 16;
    
    annotation.LabelStyle.Typeface = Typeface.DefaultFromStyle(TypefaceStyle.Italic);
    
    annotation.LabelStyle.StrokeColor = Color.Red;
    
    annotation.LabelStyle.StrokeWidth = 2;
    
    annotation.LabelStyle.BackgroundColor = Color.Blue;
    
    annotation.LabelStyle.TextColor = Color.White;
    
    chart.Annotations.Add(annotation);

    Customizing text for shape annotation in Xamarin.Android Chart

    View annotation

    The ViewAnnotation allows you to add annotations in the form of own custom view with the help of View property at the specific area of interest in the chart area. The ViewAnnotation also can be aligned by using the VerticalAlignment and HorizontalAlignment properties.

  • c#
  • [C#]
    
    SfChart chart = new SfChart(this);
    ...
    
    ViewAnnotation annotation = new ViewAnnotation()
    {
        X1 = 3,
    
        Y1 = 12,
    
        VerticalAlignment = ChartAnnotationAlignment.Start
    };
    
    ImageView imageView = new ImageView(this);
    
    imageView.SetImageResource(Resource.Drawable.Graduate);
    
    LinearLayout linearLayout = new LinearLayout(this);
    
    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, LinearLayout.LayoutParams.MatchParent);
    
    linearLayout.LayoutParameters = layoutParams;
    
    linearLayout.AddView(imageView);
    
    annotation.View = linearLayout;
    
    chart.Annotations.Add(annotation);

    View annotation type in Xamarin.Android Chart

    Annotation Visibility

    The Visibility property of ChartAnnotation is used to control the visibility of particular annotation. Default value of Visibility property is Visible.

  • c#
  • [C#]
    
    VerticalLineAnnotation verticalLineAnnotation = new VerticalLineAnnotation()
    {
        Visibility = Visibility.Gone
    };
    
    chart.ChartAnnotations.Add(verticalLineAnnotation);

    Event

    AnnotationClicked

    The AnnotationClicked event is triggered when the user has clicked the annotation. The argument contains the following information.

    • Annotation – used to get the instance of annotation which is clicked.
    • X – used to get the x position of touch point on annotation.
    • Y – used to get the y position of touch point on annotation..

    Get the touch position in annotation

    The OnTouchEvent method of ChartAnnotation occurs while doing the interactions inside the annotation.

  • c#
  • public class TextAnnotationExt : TextAnnotation
    {
       protected override void OnTouchEvent(MotionEvent e)
       {
          base.OnTouchEvent(e);
       }
    }

    Adding separate view for annotation

    The ChartAnnotationView is used to render the Annotation using the GetView method. The following code sample demonstrates how to add separate view for annotation.

  • c#
  • [C#]
    
    public class CustomEllipseAnnotation : EllipseAnnotation
    {
        protected override ChartAnnotationView GetView()
        {
            var view = new ChartAnnotationView(Android.App.Application.Context);
            return view;
        }
    }