In addition to the SeriesBinding MarkupExtension for binding a SciChartSurface to a collection of Viewmodels representing chart series, SciChart also features the AnnotationsBinding MarkupExtension: for binding to a collection of AnnotationViewModels.

To use this API, do the following:

 <s:SciChartSurface Annotations="{s:AnnotationsBinding Annotations}">

 </s:SciChartSurface>

Now in the ViewModel we need collections for the YAxes and XAxes. We update our MainViewModel like this:

public class MainViewModel : BindableObject
{
    private ObservableCollection<IAnnotationViewModel> _annotations = new ObservableCollection<IAnnotationViewModel>();
       
    public MainViewModel()
    {
        Annotations.Add(new LineAnnotationViewModel()
        {
           X1 = 1, X2 = 2, Y1 = 1, Y2 = 2,
           XAxisId = AxisBase.DefaultAxisId,
           YAxisId = AxisBase.DefaultAxisId,
           CoordinateMode = AnnotationCoordinateMode.Relative,
           DragDirections = XyDirection.XYDirection,
           ResizeDirections = XyDirection.XYDirection,
           StrokeThickness = 2, 
           Stroke = Colors.Red,
        });
        ... 
    }
   
    public ObservableCollection<IAnnotationViewModel> Annotations {  get { return _annotations; } }                
}

Applying styles to Annotations

Axis may be styled using a similar technique to the one presented for RenderableSeries. Simply declare a Style in XAML with a stylekey and set BaseAnnotationViewModel.StyleKey property.

Declaring Custom Annotationswith MVVM

Similar to Series, you can declare a custom class inheriting BaseAnnotationViewModel. Next override the ViewType property to declare the type of Annotation to create when this ViewModel is discovered. Finally, make sure you declare a style in your view based on our default styles to apply to it.

Multi-Axis Charts

In SciChart, it is required that each Axis in a corresponding Axis Collection has a unique identifier. This is a string that can be provided via the IAxisViewModel.Id property. By default, all axes have a default Axis ID.

For single-axis charts there is no need to set Axis Id. As soon as there is a secondary Axis, you need to start assigning IDs to all Axes in the corresponding Axis Collection.

In such multiple-axis scenarios, Annotations can be associated with a certain Axis. This is useful when multiple chart types are combined, or when some Annotations require individual scales. XAxisId and YAxisId properties of an Annotation are used to attach this Annotation to a specific X or Y Axis

Further Reading

For further reading on how to use the Annotations MVVM API, as well as a code sample on creating and declaring custom annotations with MVVM, see our Adding Annotations in MVVM Tutorial.