SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components



Do you have any further examples of binding the SciChart data series to a property of the items in an observable collection?

I have declared an Observable Collection made of objects called “Tab”:

public Observable Collection<Tab> TabList;

Each Tab has a property called “DataSeries”:

public XyDataSeries<double,double> DataSeries { get; set;}

I am trying to bind the SeriesSource property of the chart to the DataSeries property of every Tab.
The chart should be made up of multiple line series, one for every Tab in TabList.

My closest attempt was creating another object called ChartSeriesViewModel:

public class ChartSeriesViewModel : ViewModelBase
        private ObservableCollection<IChartSeriesViewModel> _seriesSource =  new ObservableCollection<IChartSeriesViewModel>();

        public ObservableCollection<IChartSeriesViewModel> SeriesSource
            get { return _seriesSource; }

Binding the chart to its SeriesSource property:

<sciChart:SciChartSurface DebugWhyDoesntSciChartRender="True" SeriesSource="{Binding ChartSeries.SeriesSource}" (...) />

And then populating it from each Tab.DataSeries :

_lineSeries = new FastLineRenderableSeries();
                foreach (Tab tab in TabList)
                    _chartSeries.SeriesSource.Add(new Abt.Controls.SciChart.ChartSeriesViewModel(tab.DataSeries, _lineSeries));

When I did this is seemed like the DataSeries were created but not linked to the RenderableSeries as the chart debug gave the error: “none of the SciChartSurface.RenderableSeries has a DataSeries assigned”.

I would prefer to have the SeriesSource binded directly to the DataSeries property of every Tab item instead of populating another object from Tab.DataSeries as the second method won’t allow live chart update.


  • You must to post comments

Hi Simon,

We have an MVVM example which demonstrates data-binding multiple charts in the WPF Examples Suite -> 16-Channel EEG.

This has an ItemsControl bound to collection of ChartViewModels, each one representing one chart. Then, the ChartViewModel contains the data / properties required for that chart.

enter image description here

If you look at the code for this example you should get some good ideas. Just replace ItemsControl for TabControl and ItemsControl.ItemTemplate for TabControl.ItemsTemplate and you’re set.

If you have any troubles, first place I would ask you to look is in the Visual Studio output window for any binding errors. You need to check the DataContext of your SciChartSurface is the Tab viewmodel.

You can optionally use SeriesSource and declare both RenderableSeries/DataSeries in the ChartViewModels or you can declare RenderableSeries in XAML and just bind to DataSeries in ChartViewModels. That part is up to you. In our 16-Channel EEG Example we opt for the latter (Declare RenderableSeries in XAML and bind to data).

Let me know if this helps,

Best regards,

  • You must to post comments

Hello Andrew,

Thank you for your prompt answer. Unfortunately I still couldn’t solve the problem.
Just to make things clearer:

I have an object called Tab:

public class Tab : ViewModelBase
    public string Header {get; set;}
    public ObservableCollection<DataPoint> DataPoints {get; set;}  //Data for the grid (see attached image)
    public XyDataSeries<double, double> DataSeries {get; set;}

a class called TabControlViewModel:

public class TabControlViewModel : ViewModelBase
    public ObservableCollection<Tab> TabList {get; set;}

I want to display all the Tab.DataSeries in one chart. I think that the DataContext for the ChartSurface should be TabControlViewModel because this is the one that contains the TabList.


  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.