How to bind a complex property in Xamarin.Forms Charts
The following example demonstrates how to bind a Xamarin.Forms Chart using a complex data path with dots.
Complex property binding is used to access the nested object property value to chart series in Xamarin.Forms SfChart. The following code example considers the use case of binding the datapoint to chart for the same XValue and different YValue for each series with the same data collection.
You can bind the complex property by using a dot for nested object property value in Xamarin.Forms SfChart as shown in the following code example.
XAML
<chart:SfChart.Series>
<chart:ColumnSeries ItemsSource="{Binding CategoryData}"
XBindingPath="Month"
YBindingPath="Data.YValue[1]"
Label="Column">
</chart:ColumnSeries>
<chart:LineSeries ItemsSource="{Binding CategoryData}"
XBindingPath="Month"
YBindingPath="Data.Products.ProductA"
Label="Product A">
</chart:LineSeries>
<chart:LineSeries ItemsSource="{Binding CategoryData}"
XBindingPath="Month"
YBindingPath="Data.Products.ProductB"
Label="Product B">
</chart:LineSeries>
</chart:SfChart.Series>
C#
ViewModel.cs
private ObservableCollection<ChartModel> categoryData;
public ObservableCollection<ChartModel> CategoryData
{
get { return categoryData; }
set
{
categoryData = value;
RaisePropertyChanged(nameof(CategoryData));
}
}
public ViewModel()
{
CategoryData = new ObservableCollection<ChartModel>()
{
new ChartModel()
{
Month = "Jan",
Data = new Model() { YValue = new double[] { 28, 12 }, Products = new Product(){ ProductA = 15, ProductB = 18 } }
},
new ChartModel()
{
Month = "Feb",
Data = new Model() { YValue = new double[] { 18 , 20 }, Products = new Product(){ ProductA = 12, ProductB = 28 } }
},
new ChartModel()
{
Month = "Mar",
Data = new Model() { YValue = new double[] { 22, 24 }, Products = new Product(){ ProductA = 15, ProductB = 18 } }
},
new ChartModel()
{
Month = "Apr",
Data = new Model() { YValue = new double[] { 16, 18 }, Products = new Product(){ ProductA = 8, ProductB = 14 } }
},
new ChartModel()
{
Month = "May",
Data = new Model() { YValue = new double[] { 32, 28 }, Products = new Product(){ ProductA = 22, ProductB = 28 } }
},
new ChartModel()
{
Month = "Jun",
Data = new Model() { YValue = new double[] { 30, 23 }, Products = new Product(){ ProductA = 18, ProductB = 24 } }
},
};
}
ChartModel.cs
public class ChartModel : INotifyPropertyChanged
{
private string x;
public string X
{
get { return x; }
set
{
x = value;
RaisePropertyChanged(nameof(X));
}
}
public Model data;
public Model Data
{
get { return data; }
set
{
data = value;
RaisePropertyChanged(nameof(Data));
}
}
. . .
}
Model.cs
public class Model : INotifyPropertyChanged
{
private double[] yValue;
public double[] YValue
{
get { return yValue; }
set
{
if (value != yValue)
{
yValue = value;
RaisePropertyChanged(nameof(YValue));
}
}
}
private Product products;
public Product Products
{
get { return products; }
set
{
if (value != products)
{
products = value;
RaisePropertyChanged(nameof(Products));
}
}
}
. . .
}
Product.cs
public class Product : INotifyPropertyChanged
{
private double productA;
public double ProductA
{
get { return productA; }
set
{
if (value != productA)
{
productA = value;
RaisePropertyChanged(nameof(ProductA));
}
}
}
private double productB;
public double ProductB
{
get { return productB; }
set
{
if (value != productB)
{
productB = value;
RaisePropertyChanged(nameof(ProductB));
}
}
}
. . .
}
Note
This data binding method is entirely done in XAML, and no code-behind file is required.
Output
View the complete sample on GitHub.
See also
How to add the xamarin.forms charts in a listview
How to populate the Json data to Xamarin.Forms Charts
How to bind the SQLite Database to the Xamarin.Forms Charts
How to bind series from MVVM pattern in Xamarin.Forms Charts
