Category / Section
How to bind a list of Tuple in WPF Charts?
2 mins read
This article describes how to bind the list of tuples as ItemSource in WPF Chart.
A tuple is a data structure that contains a sequence of elements of different data types. Tuple can be used as a model data for data source.
Let us see the simple example of displaying currency information in WPF chart using the tuple by following these steps:
Step 1: Create the required view model with collection property of tuple type to store the currency code and the currency name.
public class CurrencyViewModel
{
/// <summary>
/// Tuple to store Currency information
/// </summary>
public List<Tuple<string, double>> Tuples
{
get;
set;
}
public CurrencyViewModel()
{
Tuples = new List<Tuple<string, double>>();
Tuples.Add(new Tuple<string, double>("Dollar", 784));
Tuples.Add(new Tuple<string, double>("Euro", 978));
Tuples.Add(new Tuple<string, double>("Yen", 484));
Tuples.Add(new Tuple<string, double>("Peso", 554));
Tuples.Add(new Tuple<string, double>("Riyal", 682));
Tuples.Add(new Tuple<string, double>("Rupee", 840));
}
}
Step2 : Bind the Tuples property as ItemSource and just bind Item1 and Item2 to XBindingPath and YBindingPath properties of series, respectively.
<!--Assign the DataContext-->
<Window.DataContext>
<viewmodel:CurrencyViewModel></viewmodel:CurrencyViewModel>
</Window.DataContext>
<Grid>
<!—Chart-->
<chart:SfChart Width="500" Height="400">
<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis />
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis />
</chart:SfChart.SecondaryAxis>
<!--Bind Tuples to Series-->
<chart:ColumnSeries ItemsSource="{Binding Tuples}" Palette="BlueChrome" XBindingPath="Item1" YBindingPath="Item2" />
</chart:SfChart>
</Grid>
Output
See also:
How to bind the SQL database to WPF Chart
