How To Bind Array Collection To .NET MAUI Chart Sfcartesianchart
.NET MAUI chart supports array values for the XBindingPath and YBindingPath properties. The XBindinPath and YBindingPath are bound with the property name in the corresponding index value. You can bind the same property with different index values.
This article explains how to bind array collection to the .NET MAUI Chart with the following steps.
Initialize model
Create a data model class with array property.
[C#]
public class Model
{
public string Country { get; set; }
// Gold, Silver and, Bronze medals
public double[] Medals { get; set; }
}
Initialize view model
Create a ViewModel class with a Data Collection property using the above model and initialize a list of objects as shown in the following code sample.
[C#]
public class ViewModel
{
public ObservableCollection<Model> Data { get; set; }
public ViewModel()
{
Data = new ObservableCollection<Model>()
{
new Model { Country = "USA", Medals = new double[] { 39, 41, 33} },
new Model { Country = "Germany", Medals = new double[] { 10, 11, 16 } },
new Model { Country = "Britain", Medals = new double[] { 22, 20, 22} },
new Model { Country = "France", Medals = new double[] { 10, 12, 11 } },
new Model { Country = "Italy", Medals = new double[] { 10, 10, 20 } },
new Model { Country = "Japan", Medals = new double[] { 27, 14, 17 } },
new Model { Country = "Australia", Medals = new double[] { 17, 7, 22 } },
new Model { Country = "China", Medals = new double[] { 38, 32, 19} },
};
}
}
How to binding array collection in .NET MAUI Charts
Bind XBindingPath and YBindingPath with the property name in the corresponding index value.
[XAML]
<chart:ColumnSeries ItemsSource="{Binding Data}"
XBindingPath="Country"
YBindingPath="Medals[0]"/>
[C#]
ViewModel viewModel = new ViewModel();
ColumnSeries series = new ColumnSeries()
{
ItemsSource = viewModel.Data,
XBindingPath = "Country",
YBindingPath = "Medals[0]",
};
Output:
Requirements to run the demo
To run the sample demo, refer to System Requirements for .NET MAUI.
Troubleshooting
Path too long exception
If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.
