This example demonstrates the Annotations API in SciChart, which allows UIView or View elements to be placed over a Xamarin Chart at specific X and Y data-values.

This API can be used to display Text Labels, Boxes, Lines and Custom markers over the chart at specific X,Y locations as well as Watermarks or other custom UI at specific points on the viewport.

See documentation on Adding Annotations with Xamarin here:

• SciChart Xamarin iOS Annotations API
• Adding Annotations in SciChart Xamarin Android

Adding Annotations in SciChart Xamarin iOS

// AnnotationsAreEasyViewController.cs (Xamarin.iOS)

using UIKit;
using SciChart.Examples.Demo.Fragments.Base;
using Xamarin.Examples.Demo.iOS.Views.Base;
using Xamarin.Examples.Demo.iOS.Resources.Layout;
using SciChart.iOS.Charting;
using Xamarin.Examples.Demo.Utils;
using System;

namespace Xamarin.Examples.Demo.iOS
{
    [ExampleDefinition("Annotations are Easy", description: "Demonstrates how to use Annotations", icon: ExampleIcon.Annotations)]
    public class AnnotationsAreEasyViewController : ExampleBaseViewController
    {
        public override Type ExampleViewType => typeof(SingleChartViewLayout);

        public SCIChartSurface Surface => ((SingleChartViewLayout)View).SciChartSurface;

        protected override void InitExample()
        {
            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1), VisibleRange = new SCIDoubleRange(0.0, 10.0) });
                Surface.YAxes.Add(new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1), VisibleRange = new SCIDoubleRange(0.0, 10.0) });

                var horizontalLine1 = new SCIHorizontalLineAnnotation
                {
                    X1Value = 5.0,
                    Y1Value = 3.2,
                    HorizontalAlignment = SCIHorizontalLineAnnotationAlignment.Right,
                    Style = new SCILineAnnotationStyle { LinePen = new SCISolidPenStyle(UIColor.Orange, 2f) },
                };
                horizontalLine1.AddLabel(new SCILineAnnotationLabel
                {
                    Text = "Right Aligned, with text on left",
                    Style =
                    {
                        TextStyle = new SCITextFormattingStyle {Color = UIColor.Orange},
                        LabelPlacement = SCILabelPlacement.TopLeft,
                        BackgroundColor = UIColor.Clear
                    }
                });

                var horizontalLine2 = new SCIHorizontalLineAnnotation
                {
                    X1Value = 7.0,
                    Y1Value = 2.8,
                    HorizontalAlignment = SCIHorizontalLineAnnotationAlignment.Stretch,
                    Style = new SCILineAnnotationStyle { LinePen = new SCISolidPenStyle(UIColor.Orange, 2f) }
                };
                horizontalLine2.AddLabel(new SCILineAnnotationLabel
                {
                    Style =
                    {
                        TextStyle = new SCITextFormattingStyle {Color = UIColor.Black},
                        LabelPlacement = SCILabelPlacement.Axis,
                        BackgroundColor = UIColor.Orange
                    }
                });

                var verticalLine1 = new SCIVerticalLineAnnotation
                {
                    X1Value = 9.0,
                    Y1Value = 4.0,
                    VerticalAlignment = SCIVerticalLineAnnotationAlignment.Bottom,
                    Style = new SCILineAnnotationStyle { LinePen = new SCISolidPenStyle(ColorUtil.Brown.ToColor(), 2f) }
                };
                verticalLine1.AddLabel(new SCILineAnnotationLabel
                {
                    TextColor = UIColor.White,
                    Style =
                    {
                        LabelPlacement = SCILabelPlacement.Axis,
                        BackgroundColor = ColorUtil.Brown.ToColor()
                    }
                });

                var verticalLine2 = new SCIVerticalLineAnnotation
                {
                    X1Value = 9.5,
                    Y1Value = 3.0,
                    VerticalAlignment = SCIVerticalLineAnnotationAlignment.Stretch,
                    Style = new SCILineAnnotationStyle { LinePen = new SCISolidPenStyle(ColorUtil.Brown.ToColor(), 2f) }
                };
                verticalLine2.AddLabel(new SCILineAnnotationLabel
                {
                    TextColor = UIColor.White,
                    Style =
                    {
                        LabelPlacement = SCILabelPlacement.Axis,
                        BackgroundColor = ColorUtil.Brown.ToColor()
                    }
                });
                verticalLine2.AddLabel(new SCILineAnnotationLabel
                {
                    Text = "Bottom-aligned",
                    Style =
                    {
                        TextStyle = new SCITextFormattingStyle {Color = ColorUtil.Brown.ToColor()},
                        LabelPlacement = SCILabelPlacement.TopRight,
                        BackgroundColor = UIColor.Clear
                    }
                });

                Surface.Annotations = new SCIAnnotationCollection
                {
                    // Watermark
                    new SCITextAnnotation
                    {
                        X1Value = 0.5,
                        Y1Value = 0.5,
                        Text = "Create \nWatermarks",
                        Style = new SCITextAnnotationStyle
                        {
                            TextColor = 0x22FFFFFF.ToColor(),
                            TextStyle = new SCITextFormattingStyle {FontSize = 42 }
                        },
                        CoordinateMode = SCIAnnotationCoordinateMode.Relative,
                        HorizontalAnchorPoint = SCIHorizontalAnchorPoint.Center,
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Center
                    },

                    // Text annotations
                    new SCITextAnnotation
                    {
                        X1Value = 0.3,
                        Y1Value = 9.7,
                        Style = new SCITextAnnotationStyle
                        {
                            TextColor = UIColor.White,
                            TextStyle = new SCITextFormattingStyle { FontSize = 24 },
                        },
                        Text = "Annotations are Easy!",
                    },
                    new SCITextAnnotation
                    {
                        X1Value = 1.9,
                        Y1Value = 9.0,
                        Style = new SCITextAnnotationStyle
                        {
                            TextColor = UIColor.White,
                            TextStyle = new SCITextFormattingStyle { FontSize = 10 },
                        },
                        Text = "You can create text",
                    },

                    // Text with Anchor Points
                    new SCITextAnnotation
                    {
                        X1Value = 5,
                        Y1Value = 8,
                        Style = new SCITextAnnotationStyle { TextColor = UIColor.White },
                        HorizontalAnchorPoint = SCIHorizontalAnchorPoint.Center,
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Bottom,
                        Text = "Anchor Center (X1, Y1)",
                    },
                    new SCITextAnnotation
                    {
                        X1Value = 5,
                        Y1Value = 8,
                        Style = new SCITextAnnotationStyle { TextColor = UIColor.White },
                        HorizontalAnchorPoint = SCIHorizontalAnchorPoint.Right,
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Top,
                        Text = "Anchor Right",
                    },
                    new SCITextAnnotation
                    {
                        X1Value = 5,
                        Y1Value = 8,
                        Style = new SCITextAnnotationStyle { TextColor = UIColor.White },
                        HorizontalAnchorPoint = SCIHorizontalAnchorPoint.Left,
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Top,
                        Text = "or Anchor Left",
                    },

                    // Line and TODO LineArrow annotaiton
                    new SCITextAnnotation
                    {
                        X1Value = 0.3,
                        Y1Value = 6.1,
                        Style = new SCITextAnnotationStyle { TextColor = UIColor.White },
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Bottom,
                        Text = "Draw Lines with \nor without arrows",
                    },
                    new SCILineAnnotation
                    {
                        X1Value = 1.0,
                        Y1Value = 4.0,
                        X2Value = 2.0,
                        Y2Value = 6.0,
                        Style = new SCILineAnnotationStyle { LinePen = new SCISolidPenStyle(0xFF555555, 2f) }
                    },
                    new SCILineAnnotation
                    {
                        X1Value = 1.2,
                        Y1Value = 3.8,
                        X2Value = 2.5,
                        Y2Value = 6.0,
                        Style = new SCILineAnnotationStyle {LinePen = new SCISolidPenStyle(0xFF555555, 2f) }
                    },

                    // Boxes
                    new SCITextAnnotation
                    {
                        X1Value = 3.5,
                        Y1Value = 6.1,
                        Text = "Draw Boxes",
                        Style = new SCITextAnnotationStyle { TextColor = UIColor.White },
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Bottom
                    },
                    new SCIBoxAnnotation
                    {
                        X1Value = 3.5,
                        Y1Value = 4.0,
                        X2Value = 5.0,
                        Y2Value = 5.0,
                        Style = new SCIBoxAnnotationStyle
                        {
                            BorderPen = new SCISolidPenStyle(0xFF279B27, 1f),
                            FillBrush = new SCILinearGradientBrushStyle(0x550000FF, 0x55FFFF00, SCILinearGradientDirection.Horizontal)
                        }
                    },
                    new SCIBoxAnnotation
                    {
                        X1Value = 4.0,
                        Y1Value = 4.5,
                        X2Value = 5.5,
                        Y2Value = 5.5,
                        Style = new SCIBoxAnnotationStyle
                        {
                            BorderPen = new SCISolidPenStyle(0xFFFF1919, 1f),
                            FillBrush = new SCISolidBrushStyle(0x55FF1919)
                        }
                    },
                    new SCIBoxAnnotation
                    {
                        X1Value = 4.5,
                        Y1Value = 5.0,
                        X2Value = 6.0,
                        Y2Value = 6.0,
                        Style = new SCIBoxAnnotationStyle
                        {
                            BorderPen = new SCISolidPenStyle(0xFF279B27, 1f),
                            FillBrush = new SCISolidBrushStyle(0x55279B27)
                        }
                    },

                    // Custom chapes
                    new SCITextAnnotation
                    {
                        X1Value = 7.0,
                        Y1Value = 6.1,
                        Style = new SCITextAnnotationStyle { TextColor = UIColor.White },
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Bottom,
                        Text = "Or Custom Shapes"
                    },
                    new SCICustomAnnotation
                    {
                        CustomView = new UIImageView(UIImage.FromBundle("GreenArrow")),
                        X1Value = 8,
                        Y1Value = 5.5
                    },
                    new SCICustomAnnotation
                    {
                        CustomView = new UIImageView(UIImage.FromBundle("RedArrow")),
                        X1Value = 7.5,
                        Y1Value = 5
                    },

                    // Horizontal Lines
                    horizontalLine1,
                    horizontalLine2,

                    // Vertical Lines
                    verticalLine1,
                    verticalLine2
                };

                Surface.ChartModifiers = new SCIChartModifierCollection
                {
                    new SCIZoomPanModifier(),
                    new SCIPinchZoomModifier(),
                    new SCIZoomExtentsModifier()
                };
            }
        }
    }
}

// AnnotationsAreEasyFragment.cs (Xamarin.Android)

using Android.Content;
using Android.Graphics;
using Android.Util;
using Android.Views;
using SciChart.Charting.Model;
using SciChart.Charting.Modifiers;
using SciChart.Charting.Visuals;
using SciChart.Charting.Visuals.Annotations;
using SciChart.Charting.Visuals.Axes;
using SciChart.Data.Model;
using SciChart.Drawing.Common;
using SciChart.Examples.Demo.Fragments.Base;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;

namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
    [ExampleDefinition("Annotations are Easy", description: "Demonstrates how to use Annotations", icon: ExampleIcon.Annotations)]
    public class AnnotationsAreEasyFragment : ExampleBaseFragment
    {
        public override int ExampleLayoutId => Resource.Layout.Example_Single_Chart_Fragment;

        private SciChartSurface Surface => View.FindViewById<SciChartSurface>(Resource.Id.chart);

        protected override void InitExample()
        {
            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(new NumericAxis(Activity) { VisibleRange = new DoubleRange(0, 10), GrowBy = new DoubleRange(0.1, 0.1), TextFormatting = "0.0#" });
                Surface.YAxes.Add(new NumericAxis(Activity) { VisibleRange = new DoubleRange(0, 10), GrowBy = new DoubleRange(0.1, 0.1), TextFormatting = "0.0#" });

                var customAnnotation1 = new CustomAnnotation(Activity)
                {
                    X1Value = 8d,
                    Y1Value = 5.5,
                };
                customAnnotation1.SetContentId(Resource.Layout.Example_Custom_Annotation_View);

                var customAnnotation2 = new CustomAnnotation(Activity)
                {
                    X1Value = 7.5,
                    Y1Value = 5d,
                };
                customAnnotation2.SetContentView(new CustomView2(Activity));

                Surface.Annotations = new AnnotationCollection()
                {
                    // Watermark
                    new TextAnnotation(Activity)
                    {
                        X1Value = 0.5,
                        Y1Value = 0.5,
                        FontStyle = new FontStyle(Activity, Typeface.DefaultBold, 42, 0x22FFFFFF.ToColor()),
                        Text = "Create \nWatermarks",
                        CoordinateMode = AnnotationCoordinateMode.Relative,
                        HorizontalAnchorPoint = HorizontalAnchorPoint.Center,
                        VerticalAnchorPoint = VerticalAnchorPoint.Center
                    },

                    // Text annotations
                    new TextAnnotation(Activity)
                    {
                        X1Value = 0.3,
                        Y1Value = 9.7,
                        FontStyle = new FontStyle(Activity, 24, Color.White),
                        Text = "Annotations are Easy!"
                    },
                    new TextAnnotation(Activity)
                    {
                        X1Value = 1.9,
                        Y1Value = 9.0,
                        FontStyle = new FontStyle(Activity, 10, Color.White),
                        Text = "You can create text"
                    },
                    
                    // Text with Anchor Points
                    new TextAnnotation(Activity)
                    {
                        X1Value = 5d,
                        Y1Value = 8d,
                        HorizontalAnchorPoint = HorizontalAnchorPoint.Center,
                        VerticalAnchorPoint = VerticalAnchorPoint.Bottom,
                        Text = "Anchor Center (X1, Y1)"
                    },
                    new TextAnnotation(Activity)
                    {
                        X1Value = 5d,
                        Y1Value = 8d,
                        HorizontalAnchorPoint = HorizontalAnchorPoint.Right,
                        VerticalAnchorPoint = VerticalAnchorPoint.Top,
                        Text = "Anchor Right"
                    },
                    new TextAnnotation(Activity)
                    {
                        X1Value = 5d,
                        Y1Value = 8d,
                        HorizontalAnchorPoint = HorizontalAnchorPoint.Left,
                        VerticalAnchorPoint = VerticalAnchorPoint.Top,
                        Text = "or Anchor Left"
                    },

                    // Line and LineArrow annotation
                    new TextAnnotation(Activity)
                    {
                        X1Value = 0.3,
                        Y1Value = 6.1,
                        FontStyle = new FontStyle(Activity, 12, Color.White),
                        VerticalAnchorPoint = VerticalAnchorPoint.Bottom,
                        Text = "Draw Lines with \nor without arrows"
                    },
                    new LineAnnotation(Activity)
                    {
                        X1Value = 1d,
                        Y1Value = 4d,
                        X2Value = 2d,
                        Y2Value = 6d,
                        Stroke = new SolidPenStyle(Activity, Color.Argb(0xFF, 0x55, 0x55, 0x55), thickness: 2)
                    },
                    new LineArrowAnnotation(Activity)
                    {
                        X1Value = 1.2,
                        Y1Value = 3.8,
                        X2Value = 2.5,
                        Y2Value = 6d,
                        Stroke = new SolidPenStyle(Activity, Color.Argb(0xFF, 0x55, 0x55, 0x55), thickness: 2)
                    },

                    // Boxes
                    new TextAnnotation(Activity)
                    {
                        X1Value = 3.5,
                        Y1Value = 6.1,
                        Text = "Draw Boxes",
                        VerticalAnchorPoint = VerticalAnchorPoint.Bottom
                    },
                    new BoxAnnotation(Activity)
                    {
                        X1Value = 3.5,
                        Y1Value = 4d,
                        X2Value = 5d,
                        Y2Value = 5d,
                        Background = Activity.GetDrawableCompat(Resource.Drawable.example_box_annotation_background_1)
                    },
                    new BoxAnnotation(Activity)
                    {
                        X1Value = 4d,
                        Y1Value = 4.5,
                        X2Value = 5.5,
                        Y2Value = 5.5,
                        Background = Activity.GetDrawableCompat(Resource.Drawable.example_box_annotation_background_2)
                    },
                    new BoxAnnotation(Activity)
                    {
                        X1Value = 4.5,
                        Y1Value = 5d,
                        X2Value = 6d,
                        Y2Value = 6d,
                        Background = Activity.GetDrawableCompat(Resource.Drawable.example_box_annotation_background_3)
                    },

                    // Custom Shapes
                    new TextAnnotation(Activity)
                    {
                        X1Value = 7d,
                        Y1Value = 6.1,
                        FontStyle = new FontStyle(Activity, 12, Color.White),
                        VerticalAnchorPoint = VerticalAnchorPoint.Bottom,
                        Text = "Or Custom Shapes"
                    },
                    customAnnotation1,
                    customAnnotation2,

                    // Horizontal Lines
                    new HorizontalLineAnnotation(Activity)
                    {
                        X1Value = 5d,
                        Y1Value = 3.2,
                        HorizontalGravity = GravityFlags.Right,
                        Stroke = new SolidPenStyle(Activity, Color.Orange, thickness: 2),

                        AnnotationLabels = new AnnotationLabelCollection
                        {
                            new AnnotationLabel(Activity)
                            {
                                LabelPlacement = LabelPlacement.TopLeft,
                                Text = "Right Aligned, with text on left"
                            }
                        }
                    },
                    new HorizontalLineAnnotation(Activity)
                    {
                        X1Value = 7d,
                        Y1Value = 2.8,
                        Stroke = new SolidPenStyle(Activity, Color.Orange, thickness: 2),

                        AnnotationLabels = new AnnotationLabelCollection
                        {
                            new AnnotationLabel(Activity)
                            {
                                LabelPlacement = LabelPlacement.Axis
                            }
                        }
                    },

                    // Vertical Lines
                    new VerticalLineAnnotation(Activity)
                    {
                        X1Value = 9d,
                        Y1Value = 4d,
                        VerticalGravity = GravityFlags.Bottom,
                        Stroke = new SolidPenStyle(Activity, Color.Brown, thickness: 2),

                        AnnotationLabels = new AnnotationLabelCollection
                        {
                            new AnnotationLabel(Activity)
                        }
                    },
                    new VerticalLineAnnotation(Activity)
                    {
                        X1Value = 9.5d,
                        Y1Value = 3d,
                        Stroke = new SolidPenStyle(Activity, Color.Brown, thickness: 2),

                        AnnotationLabels = new AnnotationLabelCollection
                        {
                            new AnnotationLabel(Activity),
                            new AnnotationLabel(Activity)
                            {
                                LabelPlacement = LabelPlacement.TopRight,
                                Text = "Bottom-aligned",
                                RotationAngle = 90
                            }
                        }
                    }
                };

                Surface.ChartModifiers = new ChartModifierCollection
                {
                    new ZoomPanModifier(),
                    new PinchZoomModifier(),
                    new ZoomExtentsModifier(),
                };

            }
        }
    }

    public class CustomView1 : View
    {
        private readonly Path _path = new Path();
        private readonly Paint _paintFill = new Paint();
        private readonly Paint _paintStroke = new Paint();

        public CustomView1(Context context, IAttributeSet attrs) : base(context, attrs)
        {
            Init();
        }

        public CustomView1(Context context, IAttributeSet attrs, int defStyleAttr) : base(context, attrs, defStyleAttr)
        {
            Init();
        }

        public CustomView1(Context context, IAttributeSet attrs, int defStyleAttr, int defStyleRes) : base(context, attrs, defStyleAttr, defStyleRes)
        {
            Init();
        }

        private void Init()
        {
            _paintFill.SetStyle(Paint.Style.Fill);
            _paintFill.SetARGB(0x57, 0x1C, 0xB6, 0x1C);

            _paintStroke.SetStyle(Paint.Style.Stroke);
            _paintStroke.SetARGB(0xFF, 0x00, 0xB4, 0x00);

            _path.MoveTo(0, 15);
            _path.LineTo(15, 0);
            _path.LineTo(30, 15);
            _path.LineTo(20, 15);
            _path.LineTo(20, 30);
            _path.LineTo(10, 30);
            _path.LineTo(10, 15);
            _path.LineTo(0, 15);

            SetMinimumHeight(50);
            SetMinimumWidth(50);
        }

        protected override void OnDraw(Canvas canvas)
        {
            base.OnDraw(canvas);

            canvas.DrawPath(_path, _paintFill);
            canvas.DrawPath(_path, _paintStroke);
        }
    }

    public class CustomView2 : View
    {
        private readonly Path _path = new Path();
        private readonly Paint _paintFill = new Paint();
        private readonly Paint _paintStroke = new Paint();

        public CustomView2(Context context) : base(context)
        {
            _paintFill.SetStyle(Paint.Style.Fill);
            _paintFill.SetARGB(0x57, 0xB2, 0x20, 0x20);

            _paintStroke.SetStyle(Paint.Style.Stroke);
            _paintStroke.SetARGB(0xFF, 0x99, 0x00, 0x00);

            _path.MoveTo(0, 15);
            _path.LineTo(10, 15);
            _path.LineTo(10, 0);
            _path.LineTo(20, 0);
            _path.LineTo(20, 15);
            _path.LineTo(30, 15);
            _path.LineTo(15, 30);
            _path.LineTo(0, 15);

            SetMinimumHeight(50);
            SetMinimumWidth(50);
        }

        protected override void OnDraw(Canvas canvas)
        {
            base.OnDraw(canvas);

            canvas.DrawPath(_path, _paintFill);
            canvas.DrawPath(_path, _paintStroke);
        }
    }
}

< BACK TO ALL XAMARIN CHART CHART EXAMPLES