Data Binding in WPF Charts (SfChart)

14 Jul 20219 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

How to manage the empty values (NaN) in Chart