SciChart WPF 2D Charts > MVVM API > MVVM Annotations API
MVVM Annotations API

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:

AxisBinding View
Copy Code
 <s:SciChartSurface Annotations="{s:AnnotationsBinding Annotations}">


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

AxisBinding ViewModel
Copy Code
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

NOTE: By default, Annotations are associated with X and Y Axes that have the default axis ID. As soon as you set IAxisViewModel.Id on an Axis explicitly you must consider whether you need your Annotations to be associated with this Axis. If so, you need to update the XAxisId or YAxisId properties on all the Annotations in question.

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.