WPF Charting Documentation - SciChart WPF Charts SDK v5.x
MVVM Axis API

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:

AxisBinding View
Copy Code
 <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:

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

 

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.

 

 

 

 


SCICHART ® is a Registered Trademark in the UK, US and EEC. Copyright SciChart Ltd 2011-2018.

Email us to give feedback!