Data Binding in WPF Charts (SfChart)
12 Jun 20249 minutes to read
SfChart offers ItemsSource property to bind various datasource ranges from simple collection property to complex properties.
Binding a simple collection to the chart
<syncfusion:SfChart >
<syncfusion:LineSeries
ItemsSource="{Binding Demands}"
XBindingPath="Demand"
YBindingPath="Year2010">
</syncfusion:LineSeries>
</syncfusion:SfChart>SfChart chart = new SfChart();
LineSeries lineSeries = new LineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
};
chart.Series.Add(lineSeries);
public class GoldDemand
{
public string Demand { get; set; }
public double Year2010 { get; set; }
public double Year2011 { get; set; }
}
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.Demands = new ObservableCollection<GoldDemand>
{
new GoldDemand() {Demand = "Jewelry", Year2010 = 1998.0, Year2011 = 2361.2},
new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0},
new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0},
new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0},
new GoldDemand() {Demand = "Others", Year2010 = 1090.5, Year2011 = 1032.0},
new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0},
new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0},
new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0},
new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}
};
DataContext = this;
}
public ObservableCollection<GoldDemand> Demands { get; set; }
}Binding complex property to the chart
The complex property binding feature enables you to access nested object reference property values to render the chart segment.
<syncfusion:LineSeries ItemsSource="{Binding DataWithMulData}" XBindingPath="StadiumObject.CupDetailsObj.CupName" YBindingPath="StadiumObject.NumSeats" /> StadiumDetails stadiumDetails = new StadiumDetails();
LineSeries series = new LineSeries()
{
ItemsSource = new ViewModel().DataWithMulData,
XBindingPath = "stadiumDetails.CupDetailsObj.CupName",
YBindingPath = "stadiumDetails.NumSeats",
Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
};
chart.Series.Add(series);
public class StadiumDetails
{
public string PlaceName { get; set; }
public int NumSeats { get; set; }
public int Price { get; set; }
public CupDetails CupDetailsObj { get; set; }
}
public class CupDetails
{
public string CupName { get; set; }
}
public class DataPointWithMulData
{
public string Name { get; set; }
public StadiumDetails StadiumObject { get; set; }
}Binding array property to the chart
The SfChart supports array values for the XBindingPath and YBindingPath. XBindingPath and YBindingPath are bound with the property name in the corresponding index value. You can bind the same property with different index values.
The following code example demonstrates how to bind the array values for the XBindingPath and YBindingPath.
<chart:SfChart>
<chart:ColumnSeries x:Name="series" ItemsSource="{Binding Brands}"
XBindingPath="Brand[1]" YBindingPath="Count[0]" >
</chart:ColumnSeries>
</chart:SfChart>public class Model
{
public string[] Brand { get; set; }
public double[] Count { get; set; }
}
public class ViewModel
{
public ViewModel()
{
Brands = new ObservableCollection<Model>();
Brands.Add(new Model() { Brand = new string[] { "Reebok", "Adidas" }, Count
= new double[] { 34, 23 } });
Brands.Add(new Model() { Brand = new string[] { "Benz", "Audi" }, Count
= new double[] { 50, 20 } });
Brands.Add(new Model() { Brand = new string[] { "iPhone", "Nokia" }, Count
= new double[] { 24, 30 } });
Brands.Add(new Model() { Brand = new string[] { "Lenovo", "Acer" }, Count
= new double[] { 38, 23 } });
Brands.Add(new Model() { Brand = new string[] { "Fastrack", "Titan" },Count
= new double[] { 27, 29 } });
}
public ObservableCollection<Model> Brands { get; set; }
}
private void CreateChart()
{
ViewModel view = new ViewModel();
SfChart chart = new SfChart();
ColumnSeries series = new ColumnSeries();
series.ItemsSource = view.Brands;
series.XBindingPath = "Brand[1]";
series.YBindingPath = "Count[0]";
chart.Series.Add(series);
grid.Children.Add(chart);
}Listening Property Changes
You can notify the XBindingPath and YBindingPath properties changes by setting ListenPropertyChange as true as shown in the below code snippet.
<chart:ScatterSeries ScatterWidth="20" ScatterHeight="20" Label="Coal" ListenPropertyChange="True"
ItemsSource="{Binding EnergyProductions}" Interior="#BCBCBC"
XBindingPath="ID" YBindingPath="Coal">
</chart:ScatterSeries>ScatterSeries series = new ScatterSeries()
{
ItemsSource = new ViewModel().EnergyProductions,
XBindingPath = "ID",
YBindingPath = "Coal",
ScatterWidth = 20,
ScatterHeight = 20,
Label ="Coal",
ListenPropertyChange=true,
Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
};
chart.Series.Add(series);Also, When enabling this property to the series you need to implements INotifyPropertyChanged to the underlying data object to make the chart listen to the property changes of your data object.
NOTE
By default, the property change was disabled. So the dynamic updates will not get reflect in chart. You need to enable this property.
NOTE
You can refer to our WPF Charts feature tour page for its groundbreaking feature representations. You can also explore our WPF Charts example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.
See also
How to bind a list of Tuple in WPF Charts
How to bind the underlying DataTable model to the DataMarker Template in WPF Charts
How to bind the SQL Database to WPF Charts
How to bind the JSON data in WPF Chart
How to bind KeyValuePair collection in WPF Chart
How to bind the series collection property using MVVM pattern
How to bind data table in the Chart
How to create a real time Chart using MVVM in WPF
How to bind the array property in Chart
How to generate dynamic number of series based on common items source