Articles in this section
Category / Section

How to bind Series from MVVM pattern in Xamarin.Forms Chart?

1 min read

You can bind the Series property of Xamarin Chart from MVVM pattern by using ChartSeriesCollection and setting the ViewModel as BindingContext.

 

The following code sample demonstrates how to bind the Series property from MVVM pattern.

Xaml

<ContentPage.BindingContext>
        <local:ViewModel/>
</ContentPage.BindingContext>
 
<chart:SfChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Series="{Binding SeriesCollection}">
 
            <chart:SfChart.PrimaryAxis>
                <chart:NumericalAxis />
            </chart:SfChart.PrimaryAxis>
 
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis/>
            </chart:SfChart.SecondaryAxis>
</chart:SfChart> 

C#

public class ViewModel : INotifyPropertyChanged
{
        …….
        private ChartSeriesCollection seriesCollection;
        public ChartSeriesCollection SeriesCollection
        {
            get { return seriesCollection; }
            set
            {
                seriesCollection = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("SeriesCollection"));
            }
        }
 
        public ViewModel()
        {
            SeriesCollection = new ChartSeriesCollection();
 
            ColumnSeries columnSeries = new ColumnSeries()
            {
                ItemsSource = ColumnData,
                XBindingPath = "XValue",
                YBindingPath = "YValue"
            };
            SeriesCollection.Add(columnSeries);
 
            LineSeries lineSeries = new LineSeries()
            {
                ItemsSource = LineData,
                XBindingPath = "XValue",
                YBindingPath = "YValue"
            };
            SeriesCollection.Add(lineSeries);
        }        
        ……….   
}

 

Conclusion

I hope you enjoyed learning about how to bind Series from MVVM pattern in Xamarin.Forms Chart.

 

You can refer to our Xamarin Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin Chart Documentation to understand how to present and manipulate data.

 

For current customers, you can check out our Xamarin components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our  Xamarin Chart and other Xamarin components.

 

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment