We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind a list of Tuple in WPF Charts?

Platform: WPF |
Control: SfChart |
Published Date: June 24, 2020 |
Last Revised Date: June 26, 2020

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

Tuple as ItemSource of chart series.

 

See also:

How to bind the SQL database to WPF Chart

How to bind the json data in WPF Chart

How to bind keyvaluepair collection in WPF Chart

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile