How to bind array collection to .NET MAUI Chart (SfCartesianChart)?
The .NET MAUI Chart supports array values for the XBindingPath and YBindingPath properties. The XBindingPath 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 an array collection to the .NET MAUI Chart with the following steps.
Step 1: Create a data model class with an array property.
[C#]
public class Model
{
public string Country { get; set; }
// Gold, Silver and, Bronze medals
public double[] Medals { get; set; }
}Step 2: 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} },
};
}
}Step 3: 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]",
};Download the complete sample on GitHub.
Output
Tokyo 2020 Olympic Medal Table
Conclusion
I hope you enjoyed learning how to bind an array collection to .NET MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
