SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components
Xamarin Interaction with Annotations
// Xamarin Chart Examples
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 ~60 native iOS examples and 60 Android examples, but now also ~30 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 SciChart Xamarin iOS Annotations API and AxisMarkerAnnotation iOS and AxisMarkerAnnotation Android
Tip!
You can make annotations Read-only, by calling the setIsEditable(false) on an Annotation. In this example, all the annotations have IsEditable=true. You can select them, drag and resize via the anchor-points.
// Source Code
The C#/Xamarin.iOS/Xamarin.Android source code for the Xamarin Interaction with 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?
- Clone the SciChart.Xamarin.Examples from Github.
- Also, the SciChart for Xamarin Trial contains the full source code for the Xamarin chart examples (link below).
// InteractionWithAnnotationsViewController.cs (Xamarin.iOS)
using SciChart.iOS.Charting;
using UIKit;
using Xamarin.Examples.Demo.iOS.Resources.Layout;
using Xamarin.Examples.Demo.iOS.Views.Base;
using SciChart.Examples.Demo.Fragments.Base;
using Xamarin.Examples.Demo.Utils;
using System;
using Xamarin.Examples.Demo.Data;
using System.Linq;
namespace Xamarin.Examples.Demo.iOS.Views.Examples
{
[ExampleDefinition("Interaction with Annotations", description: "Demonstrates touch-interaction with Annotations", icon: ExampleIcon.Annotations)]
public class InteractionWithAnnotationsViewController : ExampleBaseViewController
{
public override Type ExampleViewType => typeof(SingleChartViewLayout);
public SCIChartSurface Surface => ((SingleChartViewLayout)View).SciChartSurface;
protected override void InitExample()
{
var dataSeries = new OhlcDataSeries<DateTime, double>();
var marketDataService = new MarketDataService(new DateTime(2000, 08, 01, 12, 00, 00), 5, 5);
var data = marketDataService.GetHistoricalData(200);
dataSeries.Append(data.Select(x => x.DateTime), data.Select(x => x.Open), data.Select(x => x.High), data.Select(x => x.Low), data.Select(x => x.Close));
Surface.XAxes.Add(new SCICategoryDateTimeAxis());
Surface.YAxes.Add(new SCINumericAxis { VisibleRange = new SCIDoubleRange(30, 37) });
Surface.RenderableSeries.Add(new SCIFastCandlestickRenderableSeries { DataSeries = dataSeries });
Surface.ChartModifiers = new SCIChartModifierCollection
{
new SCIZoomPanModifier(),
new SCIPinchZoomModifier(),
new SCIZoomExtentsModifier()
};
SCIThemeManager.ApplyDefaultTheme(Surface);
var horizontalLine1 = new SCIHorizontalLineAnnotation
{
X1Value = 150,
Y1Value = 32.2,
HorizontalAlignment = SCIHorizontalLineAnnotationAlignment.Right,
Style = new SCILineAnnotationStyle { LinePen = new SCISolidPenStyle(ColorUtil.Red, 2f) },
IsEditable = true
};
horizontalLine1.AddLabel(new SCILineAnnotationLabel
{
Style =
{
TextStyle = new SCITextFormattingStyle {Color = UIColor.White},
LabelPlacement = SCILabelPlacement.Axis,
BackgroundColor = ColorUtil.Red.ToColor()
}
});
var horizontalLine2 = new SCIHorizontalLineAnnotation
{
X1Value = 130,
X2Value = 160,
Y1Value = 33.9,
HorizontalAlignment = SCIHorizontalLineAnnotationAlignment.Center,
Style = new SCILineAnnotationStyle { LinePen = new SCISolidPenStyle(ColorUtil.Blue, 2f) },
IsEditable = true,
};
horizontalLine2.AddLabel(new SCILineAnnotationLabel
{
Style =
{
TextStyle = new SCITextFormattingStyle {Color = UIColor.Blue},
LabelPlacement = SCILabelPlacement.Top,
BackgroundColor = UIColor.Clear
},
Text = "Top",
});
horizontalLine2.AddLabel(new SCILineAnnotationLabel
{
Style =
{
TextStyle = new SCITextFormattingStyle {Color = UIColor.Blue},
LabelPlacement = SCILabelPlacement.Left,
BackgroundColor = UIColor.Clear
},
Text = "Left",
});
horizontalLine2.AddLabel(new SCILineAnnotationLabel
{
Style =
{
TextStyle = new SCITextFormattingStyle {Color = UIColor.Blue},
LabelPlacement = SCILabelPlacement.Right,
BackgroundColor = UIColor.Clear
},
Text = "Right",
});
var verticalLine1 = new SCIVerticalLineAnnotation
{
X1Value = 40,
Y1Value = 34,
VerticalAlignment = SCIVerticalLineAnnotationAlignment.Top,
Style = new SCILineAnnotationStyle { LinePen = new SCISolidPenStyle(ColorUtil.Green, 2f) },
IsEditable = true,
};
verticalLine1.AddLabel(new SCILineAnnotationLabel
{
Style =
{
TextStyle = new SCITextFormattingStyle {Color = UIColor.Green},
LabelPlacement = SCILabelPlacement.Top,
BackgroundColor = UIColor.Clear
},
});
Surface.Annotations = new SCIAnnotationCollection
{
new SCITextAnnotation
{
CoordinateMode = SCIAnnotationCoordinateMode.Relative,
HorizontalAnchorPoint = SCIHorizontalAnchorPoint.Center,
Text = "EUR.USD",
X1Value = 0.5,
Y1Value = 0.5,
Style = new SCITextAnnotationStyle
{
TextColor = 0x77FFFFFF.ToColor(),
TextStyle = new SCITextFormattingStyle {FontSize = 72 },
BackgroundColor = UIColor.Clear
},
},
new SCITextAnnotation
{
CoordinateMode = SCIAnnotationCoordinateMode.Absolute,
IsEditable = true,
EditableText = false,
Text = "Buy!",
X1Value = 10d,
Y1Value = 30.5d,
VerticalAnchorPoint = SCIVerticalAnchorPoint.Bottom,
HorizontalAnchorPoint = SCIHorizontalAnchorPoint.Left,
Style =
{
TextStyle = { FontSize = 20 },
TextColor = ColorUtil.White.ToColor(),
BackgroundColor = UIColor.Clear
},
},
new SCITextAnnotation
{
CoordinateMode = SCIAnnotationCoordinateMode.Absolute,
IsEditable = true,
EditableText = false,
Text = "Sell!",
X1Value = 50d,
Y1Value = 34d,
Style =
{
TextStyle = { FontSize = 20 },
TextColor = ColorUtil.White.ToColor(),
BackgroundColor = 0x33FF3333.ToColor()
},
},
new SCIBoxAnnotation
{
IsEditable = true,
Style =
{
FillBrush = new SCISolidBrushStyle(UIColor.FromRGBA(0xFF, 0x66, 0x00, 0x33)),
BorderPen = new SCISolidPenStyle(UIColor.FromRGBA(0xFF, 0x66, 0x00, 0x77), 1.0f)
},
X1Value = 50,
Y1Value = 35.5,
X2Value = 120,
Y2Value = 32,
},
new SCILineAnnotation
{
IsEditable = true,
Style = { LinePen = new SCISolidPenStyle(0xAAFF6600, 2f) },
X1Value = 40,
Y1Value = 30.5,
X2Value = 60,
Y2Value = 33.5,
},
new SCILineAnnotation
{
IsEditable = true,
Style = { LinePen = new SCISolidPenStyle(0xAAFF6600, 2f) },
X1Value = 120,
Y1Value = 30.5,
X2Value = 175,
Y2Value = 36,
},
// TODO LineArrow annotaiton
new SCILineAnnotation
{
IsEditable = true,
Style = { LinePen = new SCISolidPenStyle(0xAAFF6600, 2f) },
X1Value = 50,
Y1Value = 35,
X2Value = 80,
Y2Value = 31.4,
},
new SCIAxisMarkerAnnotation
{
CoordinateMode = SCIAnnotationCoordinateMode.Absolute,
IsEditable = true,
Position = 32.7,
},
new SCIAxisMarkerAnnotation
{
Style = {AnnotationSurface = SCIAnnotationSurfaceEnum.XAxis},
FormattedValue = "Horizontal",
IsEditable = true,
Position = 100,
},
horizontalLine1,
horizontalLine2,
new SCIVerticalLineAnnotation
{
X1Value = 20,
Y1Value = 35,
Y2Value = 33,
VerticalAlignment = SCIVerticalLineAnnotationAlignment.Center,
Style = new SCILineAnnotationStyle { LinePen = new SCISolidPenStyle(ColorUtil.DarkGreen, 2f) },
IsEditable = true,
},
verticalLine1,
new SCITextAnnotation
{
X1Value = 50,
Y1Value = 37,
IsEditable = true,
EditableText = false,
Text = "Rotated text",
Style =
{
TextStyle = { FontSize = 20 },
TextColor = ColorUtil.White.ToColor(),
BackgroundColor = UIColor.Clear
},
//RotationAngle = 30
}
};
}
}
}// InteractionWithAnnotationsFragment.cs (Xamarin.Android)
using System;
using System.Linq;
using Android.Views;
using SciChart.Charting.Model;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Modifiers;
using SciChart.Charting.Visuals;
using SciChart.Charting.Visuals.Annotations;
using SciChart.Charting.Visuals.Axes;
using SciChart.Charting.Visuals.RenderableSeries;
using SciChart.Data.Model;
using SciChart.Drawing.Common;
using SciChart.Examples.Demo.Fragments.Base;
using Xamarin.Examples.Demo.Data;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;
using Xamarin.Examples.Demo.Utils;
namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
[ExampleDefinition("Interaction with Annotations", description:"Demonstrates Interaction with Annotations via touch", icon: ExampleIcon.Annotations)]
public class InteractionWithAnnotationsFragment : ExampleBaseFragment
{
public override int ExampleLayoutId => Resource.Layout.Example_Single_Chart_Fragment;
private SciChartSurface Surface => View.FindViewById<SciChartSurface>(Resource.Id.chart);
protected override void InitExample()
{
var dataSeries = new OhlcDataSeries<DateTime, double>();
var marketDataService = new MarketDataService(new DateTime(2000, 08, 01, 12, 00, 00), 5, 5);
var data = marketDataService.GetHistoricalData(200);
dataSeries.Append(data.Select(x => x.DateTime), data.Select(x => x.Open), data.Select(x => x.High), data.Select(x => x.Low), data.Select(x => x.Close));
Surface.XAxes.Add(new CategoryDateAxis(Activity));
Surface.YAxes.Add(new NumericAxis(Activity) {VisibleRange = new DoubleRange(30, 37)});
Surface.RenderableSeries.Add(new FastCandlestickRenderableSeries {DataSeries = dataSeries});
Surface.ChartModifiers.Add(new ZoomPanModifier());
Surface.Annotations = new AnnotationCollection
{
new TextAnnotation(Activity)
{
CoordinateMode = AnnotationCoordinateMode.Relative,
HorizontalAnchorPoint = HorizontalAnchorPoint.Center,
Text = "EUR.USD",
FontStyle = new FontStyle(72.ToDip(Activity), 0x77FFFFFF),
X1Value = 0.5,
Y1Value = 0.5
},
new TextAnnotation(Activity)
{
IsEditable = true,
Text = "Buy",
X1Value = 10d,
Y1Value = 30.5d,
VerticalAnchorPoint = VerticalAnchorPoint.Bottom,
FontStyle = new FontStyle(20.ToDip(Activity), ColorUtil.White),
},
new TextAnnotation(Activity)
{
Background = Activity.GetDrawableCompat(Resource.Drawable.example_text_annotation_background),
IsEditable = true,
Text = "Sell!",
X1Value = 50d,
Y1Value = 34d,
FontStyle = new FontStyle(20.ToDip(Activity), ColorUtil.White),
},
new BoxAnnotation(Activity)
{
IsEditable = true,
Background = Activity.GetDrawableCompat(Resource.Drawable.example_box_annotation_background_4),
X1Value = 50,
Y1Value = 35.5,
X2Value = 120,
Y2Value = 32,
},
new LineAnnotation(Activity)
{
IsEditable = true,
Stroke = new SolidPenStyle(0xAAFF6600, 2f.ToDip(Activity)),
X1Value = 40,
Y1Value = 30.5,
X2Value = 60,
Y2Value = 33.5,
},
new LineAnnotation(Activity)
{
IsEditable = true,
Stroke = new SolidPenStyle(0xAAFF6600, 2f.ToDip(Activity)),
X1Value = 120,
Y1Value = 30.5,
X2Value = 175,
Y2Value = 36,
},
new LineArrowAnnotation(Activity)
{
IsEditable = true,
HeadLength = 8,
HeadWidth = 16,
X1Value = 50,
Y1Value = 35,
X2Value = 80,
Y2Value = 31.4,
},
new AxisMarkerAnnotation(Activity)
{
IsEditable = true,
Y1Value = 32.7
},
new AxisMarkerAnnotation(Activity)
{
AnnotationSurface = AnnotationSurfaceEnum.XAxis,
FormattedValue = "Horizontal",
IsEditable = true,
X1Value = 100
},
new HorizontalLineAnnotation(Activity)
{
X1Value = 150,
Y1Value = 32.2,
Stroke = new SolidPenStyle(ColorUtil.Red, 2f.ToDip(Activity)),
HorizontalGravity = GravityFlags.Right,
IsEditable = true,
AnnotationLabels = new AnnotationLabelCollection()
{
new AnnotationLabel(Activity)
{
LabelPlacement = LabelPlacement.Axis
}
}
},
new HorizontalLineAnnotation(Activity)
{
X1Value = 130,
X2Value = 160,
Y1Value = 33.9,
Stroke = new SolidPenStyle(ColorUtil.Blue, 2f.ToDip(Activity)),
HorizontalGravity = GravityFlags.CenterHorizontal,
IsEditable = true,
AnnotationLabels = new AnnotationLabelCollection()
{
new AnnotationLabel(Activity)
{
LabelPlacement = LabelPlacement.Left,
Text = "Left"
},
new AnnotationLabel(Activity)
{
LabelPlacement = LabelPlacement.Top,
Text = "Top"
},
new AnnotationLabel(Activity)
{
LabelPlacement = LabelPlacement.Right,
Text = "Rigth"
}
}
},
new VerticalLineAnnotation(Activity)
{
X1Value = 20,
Y1Value = 35,
Y2Value = 33,
Stroke = new SolidPenStyle(ColorUtil.DarkGreen, 2f.ToDip(Activity)),
VerticalGravity = GravityFlags.CenterVertical,
IsEditable = true
},
new VerticalLineAnnotation(Activity)
{
X1Value = 40,
Y1Value = 34,
Stroke = new SolidPenStyle(ColorUtil.Green, 2f.ToDip(Activity)),
VerticalGravity = GravityFlags.Top,
IsEditable = true,
AnnotationLabels = new AnnotationLabelCollection()
{
new AnnotationLabel(Activity)
{
LabelPlacement = LabelPlacement.Top,
RotationAngle = 90
}
}
},
new TextAnnotation(Activity)
{
X1Value = 50,
Y1Value = 37,
IsEditable = true,
Text = "Rotated text",
FontStyle = new FontStyle(20.ToDip(Activity), ColorUtil.White),
RotationAngle = 30
}
};
}
}
}