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

To use this API, do the following:

 <s:SciChartSurface YAxes="{s:AxesBinding YAxes}"
                    XAxes="{s:AxesBinding XAxes}">

 </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<IAxisViewModel> _yAxes = new ObservableCollection<IAxisViewModel>();
    private ObservableCollection<IAxisViewModel> _xAxes = new ObservableCollection<IAxisViewModel>();
    public MainViewModel()
    {
        YAxes.Add(new NumericAxisViewModel()
        {
            AutoRange = AutoRange.Always,
            AxisTitle = "Left YAxis",
            Id = "LeftYAxis",
            AxisAlignment = AxisAlignment.Left,
        });
        YAxes.Add(new NumericAxisViewModel()
        {
            AutoRange = AutoRange.Always,
            AxisTitle = "Right YAxis",
            AxisAlignment = AxisAlignment.Right,
        });
        XAxes.Add(new NumericAxisViewModel()
        {
            AutoRange = AutoRange.Always,
            AxisTitle = "XAxis",
            AxisAlignment = AxisAlignment.Bottom,
        });
    }
   
    public ObservableCollection<IAxisViewModel> YAxes {  get { return _yAxes; } }
   
    public ObservableCollection<IAxisViewModel> XAxes { get { return _xAxes; } }
}

Applying styles to Axis

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 AxisBaseViewModel.StyleKey property.

Declaring Custom Axis with MVVM

Similar to Series, you can declare a custom class inheriting AxisBaseViewModel. Next override the ViewType property to declare the type of Axis 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, some SciChart types such as Renderable Series, Annotations, Chart Modifiers can be associated with a certain Axis. Their API usually exposes XAxisId and YAxisId properties that can be used to associate this type with a specific X or Y Axis.

Further Reading

For further reading on how to use the Axis MVVM API, as well as a code sample, see our Adding Multiple Axis in MVVM Tutorial.