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 CoreGraphics;
using SciChart.iOS.Charting;
using Xamarin.Examples.Demo.Utils;

namespace Xamarin.Examples.Demo.iOS
{
    [ExampleDefinition("Annotations are Easy", description: "Demonstrates how to use Annotations", icon: ExampleIcon.Annotations)]
    public class AnnotationsAreEasyViewController : SingleChartViewController<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 = SCIAlignment.Right,
                    Stroke = new SCISolidPenStyle(UIColor.Orange, 2),
                };
                horizontalLine1.AnnotationLabels.Add(new SCIAnnotationLabel
                {
                    LabelPlacement = SCILabelPlacement.TopLeft,
                    Text = "Right Aligned, with text on left",
                });

                var horizontalLine2 = new SCIHorizontalLineAnnotation
                {
                    X1Value = 7.0,
                    Y1Value = 2.8,
                    HorizontalAlignment = SCIAlignment.FillHorizontal,
                    Stroke = new SCISolidPenStyle(UIColor.Orange, 2),
                };
                horizontalLine2.AnnotationLabels.Add(new SCIAnnotationLabel { LabelPlacement = SCILabelPlacement.Axis });

                var verticalLine1 = new SCIVerticalLineAnnotation
                {
                    X1Value = 9.0,
                    Y1Value = 4.0,
                    VerticalAlignment = SCIAlignment.Bottom,
                    Stroke = new SCISolidPenStyle(ColorUtil.Brown.ToUIColor(), 2),
                };
                verticalLine1.AnnotationLabels.Add(new SCIAnnotationLabel { LabelPlacement = SCILabelPlacement.Axis });

                var verticalLine2 = new SCIVerticalLineAnnotation
                {
                    X1Value = 9.5,
                    Y1Value = 3.0,
                    VerticalAlignment = SCIAlignment.FillVertical,
                    Stroke = new SCISolidPenStyle(ColorUtil.Brown.ToUIColor(), 2),
                };
                verticalLine2.AnnotationLabels.Add(new SCIAnnotationLabel { LabelPlacement = SCILabelPlacement.Axis });
                verticalLine2.AnnotationLabels.Add(new SCIAnnotationLabel
                {
                    Text = "Bottom-aligned",
                    LabelPlacement = SCILabelPlacement.TopRight,
                    RotationAngle = -90
                });                

                Surface.Annotations = new SCIAnnotationCollection
                {
                    // Watermark
                    new SCITextAnnotation
                    {
                        X1Value = 0.5,
                        Y1Value = 0.5,
                        CoordinateMode = SCIAnnotationCoordinateMode.Relative,
                        HorizontalAnchorPoint = SCIHorizontalAnchorPoint.Center,
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Center,
                        
                        FontStyle = new SCIFontStyle(40, 0x22FFFFFF),
                        Text = "Create \nWatermarks",
                    },

                    // Text annotations
                    new SCITextAnnotation
                    {
                        X1Value = 0.3,
                        Y1Value = 9.7,
                        FontStyle = new SCIFontStyle(24, UIColor.White),
                        Text = "Annotations are Easy!",
                    },
                    new SCITextAnnotation
                    {
                        X1Value = 1.9,
                        Y1Value = 9.0,
                        FontStyle = new SCIFontStyle(12, UIColor.White),
                        Text = "You can create text",
                    },
                    new SCITextAnnotation
                    {
                        X1Value = 1.0,
                        Y1Value = 8.8,
                        CanEditText = true,
                        FontStyle = new SCIFontStyle(12, UIColor.White),
                        Text = "And even edit it ... (tap me)",
                    },

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

                    // Line and LineArrow annotations
                    new SCITextAnnotation
                    {
                        X1Value = 0.3,
                        Y1Value = 6.1,
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Bottom,
                        FontStyle = new SCIFontStyle(10, UIColor.White),
                        Text = "Draw Lines with \nor without arrows",
                    },
                    new SCILineAnnotation
                    {
                        X1Value = 1.0,
                        Y1Value = 4.0,
                        X2Value = 2.0,
                        Y2Value = 6.0,
                        Stroke = new SCISolidPenStyle(0xFF555555, 2f),
                    },
                    new SCILineArrowAnnotation
                    {
                        X1Value = 1.2,
                        Y1Value = 3.8,
                        X2Value = 2.5,
                        Y2Value = 6.0,
                        Stroke = new SCISolidPenStyle(0xFF555555, 2f),
                    },

                    // Boxes
                    new SCITextAnnotation
                    {
                        X1Value = 3.5,
                        Y1Value = 6.1,
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Bottom,
                        Text = "Draw Boxes",
                    },
                    new SCIBoxAnnotation
                    {
                        X1Value = 3.5,
                        Y1Value = 4.0,
                        X2Value = 5.0,
                        Y2Value = 5.0,
                        FillBrush = new SCILinearGradientBrushStyle(new CGPoint(0.0, 0.5), new CGPoint(1.0, 0.5), 0x550000FF, 0x55FFFF00),
                        BorderPen = new SCISolidPenStyle(0xFF279B27, 1f),
                    },
                    new SCIBoxAnnotation
                    {
                        X1Value = 4.0,
                        Y1Value = 4.5,
                        X2Value = 5.5,
                        Y2Value = 5.5,
                        FillBrush = new SCISolidBrushStyle(0x55FF1919),
                        BorderPen = new SCISolidPenStyle(0xFFFF1919, 1f),
                    },
                    new SCIBoxAnnotation
                    {
                        X1Value = 4.5,
                        Y1Value = 5.0,
                        X2Value = 6.0,
                        Y2Value = 6.0,
                        FillBrush = new SCISolidBrushStyle(0x55279B27),
                        BorderPen = new SCISolidPenStyle(0xFF279B27, 1f),
                    },

                    // Custom chapes
                    new SCITextAnnotation
                    {
                        X1Value = 7.0,
                        Y1Value = 6.1,
                        VerticalAnchorPoint = SCIVerticalAnchorPoint.Bottom,
                        FontStyle = new SCIFontStyle(12, UIColor.White),
                        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.Add(CreateDefaultModifiers());
            }
        }
    }
}

// AnnotationsAreEasyFragment.cs (Xamarin.Android)

using Android.Content;
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 Xamarin.Examples.Demo;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;
using Android.Graphics;
using Color = System.Drawing.Color;

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.FromArgb(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.FromArgb(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