Articles in this section
Category / Section

How to bind array collection to Xamarin.Forms Chart?

1 min read

This article describes how to bind an array collection to chart series. Array collection can be bound to chart series by mapping the array name and its index to the XBindingPath and YBindingPath properties of the series as demonstrated in the following code snippet.

C#

 
public class Model
{
    public double X { get; set; }
    public double[] Y { get; set; }
}
 
public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }
 
    public ViewModel()  
    {
        Data = new ObservableCollection<Model>();
 
        Data.Add(new Model { X = 1, Y = new double[] { 4, 10 } });
        Data.Add(new Model { X = 2, Y = new double[] { 8, 15 } });
        Data.Add(new Model { X = 3, Y = new double[] { 12, 20 } });
        Data.Add(new Model { X = 4, Y = new double[] { 16, 25 } });
    }
} 
 

 

XAML

 
<chart:SfChart>
 
    …
 
    <chart:SfChart.BindingContext>
        <local:ViewModel/>
    </chart:SfChart.BindingContext>
    
    <chart:SfChart.Series>
        <chart:ColumnSeries x:Name="ChartSeries" ItemsSource="{Binding Data}" 
                            XBindingPath="X" YBindingPath="Y[0]"/>
    </chart:SfChart.Series>
 
</chart:SfChart> 
 

 

C#

 
ColumnSeries series = new ColumnSeries()
{
    XBindingPath = "X",
    YBindingPath = "Y[0]",
    ItemsSource = new ViewModel().Data
};
 
ChartControl.Series.Add(series); 
 

 

Output

 

Chart rendered using array binding

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