SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
Please note! These examples are new to SciChart Mobile v3 release! SciChart iOS & Android ship with Xamarin.iOS and Xamarin.Android bindings around our native iOS & Android Chart controls, allowing you to create fast & feature rich charts to your Xamarin applications. We include ~90 native iOS examples and 90 Android examples, but now also ~60 Xamarin Chart Examples to help you get started with SciChart. You can download the source for our Xamarin Chart Examples from Github, or browse the source code below.
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:
Adding Annotations in SciChart Xamarin iOS
The C#/Xamarin.iOS/Xamarin.Android source code for the Xamarin Chart Annotations example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
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());
}
}
}
}
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);
}
}
}