How to bind Chart Series Collection using MVVM in UWP Charts?

This article demonstrates how to bind the Series property of a Syncfusion® UWP SfChart control using the Model-View-ViewModel (MVVM) pattern. We will utilize the ChartSeriesCollection class to manage and dynamically update chart series.

Follow these steps to implement MVVM data binding for UWP Chart series:

Step 1: Create a DataModel to represent the points in your chart series. This model should contain properties for your X and Y values.

public class Model
{
    public string XValue 
    { 
        get; 
        set; 
    }

    public double YValue 
    { 
        get; 
        set; 
    }

    public Model(string xValue, double yValue)
    {
        XValue = xValue;
        YValue = yValue;
    }
}

Step 2: Define your ViewModel to hold data and manage chart series. The ViewModel will hold the data as observable collections of Model objects and the ChartSeriesCollection that the SfChart will bind to, adhering to the MVVM pattern.

public class ViewModel : INotifyPropertyChanged
{
    private ChartSeriesCollection series;

    public ChartSeriesCollection Series
    {
        get => series;
        set
        {
            series = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Series)));
        }
    }

    public ObservableCollection<Model> DataSource { get; set; }

    public ViewModel()
    {
        DataSource = new ObservableCollection<Model>
        {
            new Model("Benz", 10),
            new Model("Volvo", 20),
            new Model("Jaguar", 30),
            new Model("BMW", 35),
            new Model("Toyota", 20),
            new Model("Audi", 10)
        };

        Series = new ChartSeriesCollection
        {
            new ColumnSeries
            {
                ItemsSource = DataSource,
                XBindingPath = "XValue",
                YBindingPath = "YValue"
            }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

Step 3: In your XAML, instantiate your ViewModel and set it as the DataContext. Then, bind the SfChart's Series property to the Series property.

<Grid>

     <Grid.DataContext>
        <local:ViewModel />
    </Grid.DataContext>

     <chart:SfChart Series="{Binding Series}" Margin="20">
        <chart:SfChart.PrimaryAxis>
            <chart:CategoryAxis>
                <chart:CategoryAxis.LabelStyle>
                    <chart:LabelStyle FontSize="24" />
                </chart:CategoryAxis.LabelStyle>
            </chart:CategoryAxis>
        </chart:SfChart.PrimaryAxis>
        <chart:SfChart.SecondaryAxis>
            <chart:NumericalAxis Interval="5" Maximum="45">
                <chart:NumericalAxis.LabelStyle>
                    <chart:LabelStyle FontSize="18" />
                </chart:NumericalAxis.LabelStyle>
            </chart:NumericalAxis>
        </chart:SfChart.SecondaryAxis>
    </chart:SfChart>

</Grid>