Multiple Y Axes Via Binding | WPF Chart Forums

I am using the MVVM pattern.

I trying to manage the number of YAxes in my chart in a dynamic manner by binding the YAxes in the chart to a collection so that each time I add a new line series that line series gets its own axis.

When I do this I am getting a null reference expection.
If I hard code the YAxes or YAxis my chart loads.

Here is the xaml:

<SciChart:SciChartSurface x:Name="historicalChart" 
    RenderableSeries="{Binding HistoricalRenderableSeries, Mode=TwoWay}"
    YAxes="{Binding ChartYAxes, Mode=TwoWay}"
    SciChart:ThemeManager.Theme="ExpressionLight">
   ...
</s:SciChartSurface>

Here is the ViewModel

I tried both an ObservableCollection and a AxisCollection in my view model.

private ObservableCollection<NumericAxis> _chartYAxes = new ObservableCollection<NumericAxis>();
public ObservableCollection<NumericAxis> ChartYAxes
{
  get { return _chartYAxes; }
  set
  {
    _chartYAxes = value;
    NotifyPropertyChanged("ChartYAxes");
  }
}

private AxisCollection _chartYAxes = new AxisCollection();
public AxisCollection ChartYAxes
{
  get { return _chartYAxes; }
  set
  {
    _chartYAxes = value;
    NotifyPropertyChanged("ChartYAxes");
  }
}

Can anyone suggest a way to manage a variable number of YAxes in a chart?

WPF MVVM Axis

sdemooy asked 7 years ago
last edited 5 years ago

You must login to post comments

Answers (2)

Your code looks correct, you need to bind to AxisCollection not ObservableCollection, SciChart expects this type. Of course, you’ll need to initialize the AxisCollection to an empty collection and you should then be able to add/remove axes freely.

So you need to do this

Xaml:

<SciChart:SciChartSurface x:Name="historicalChart" 
    RenderableSeries="{Binding HistoricalRenderableSeries, Mode=TwoWay}"
    YAxes="{Binding ChartYAxes, Mode=TwoWay}"
    SciChart:ThemeManager.Theme="ExpressionLight">
   ...
</s:SciChartSurface>

ViewModel

I tried both an ObservableCollection and a AxisCollection in my view model.

private AxisCollection _chartYAxes = new AxisCollection();
public AxisCollection ChartYAxes
{
  get { return _chartYAxes; }
  set
  {
    _chartYAxes = value;
    NotifyPropertyChanged("ChartYAxes");
  }
}

Then, you can add or remove Axis to the AxisCollection dynamically. Don’t forget when dynamically adding or removing Axes:

To set the AxisBase.Id to a new, unique string. The first axis has by default “DefaultAxisId”. Subsequent axis need another user-provided ID.
To ensure that the RenderableSeries you are using have YAxisId, XAxisId set (unless default). If not, they will not render.

Let me know if this solves the problem!

Images

Andrew answered 7 years ago
last edited 5 years ago

You must login to post comments

Update May 2015:

We also have a worked example over here which shows another method of dynamically adding/removing Axis in MVVM. In this method, we create an attached behaviour and bind to an ObservableCollection of AxisViewModel, therefore this is a true MVVM implementation (does not have creation of NumericAxis in the ViewModel)

See the article Template items of an AxisCollection for further information

Best regards,
Andrew

Andrew answered 5 years ago

You must login to post comments

Your Answer

Please login first to submit.