New to Telerik UI for WinUI? Download free 30-day trial

Data Binding

Data binding for the RadSparkline controls involves the correlation between the business logic and the visualization of the control.

The DataBinding works with the following three properties of the RadSparkline controls.

  • ItemsSource: Gets or sets the data source used to generate the content of the sparkline control. Elements can be bound to data from a variety of data sources in the form of common language runtime (CLR) objects and XML.

  • XValuePath: Sets the name of the property from the underlying datasource, which will determine the position of each datapoint along the x axis.

  • YValuePath: Sets the name of the property from the underlying datasource, which will determine the position of each datapoint along the y axis.

Supported Data Sources

You can bind RadSparkline to a data source that implements one of the following interfaces.

Binding To Collection of Doubles

The following code snippets demonstrate how to databind RadSparkline to generic List of double type.

Example 1: Create RadLinearSparkline in XAML and turn on visibility of its indicators

<telerik:RadLinearSparkline Width="150" Height="50" x:Name="myLinearSparkline" ShowFirstPointIndicator="True" ShowLastPointIndicator="True" ShowHighPointIndicators="True" ShowLowPointIndicators="True"/> 
Set the List as ItemsSource of the sparkline control.

Random r = new Random(); 
List<double> myData = new List<double>(); 
for (int i = 0; i < 20; i++) 
myLinearSparkline.ItemsSource = myData; 

Binding To a List of Business Objects

If you have a list of business objects and you want to bind it to the RadSparkline control here is how to do it:

<telerik:RadColumnSparkline x:Name="PART_SparkbarControl" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="400" 
                            YValuePath="UnitCost" /> 
<telerik:RadLinearSparkline x:Name="PART_SparklineControl" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="400" Margin="0,54,0,0" 
                            ShowLowPointIndicators="True" /> 

public partial class MainPage : UserControl  
    public MainPage() //MainWindow in WPF 
        DateTime today = DateTime.Today; 
        List<MyCost> data = new List<MyCost>() 
            new MyCost() { Cost = 1, UnitCost = 2, MyDate=today }, 
            new MyCost() { Cost = 2, UnitCost = 4, MyDate= today.AddDays(1)}, 
            new MyCost() { Cost = 3, UnitCost = 6, MyDate=today.AddDays(2) }, 
            new MyCost() { Cost = 4, UnitCost = 4, MyDate=today.AddDays(3)}, 
            new MyCost() { Cost = 5, UnitCost = 8, MyDate=today.AddDays(4)}, 
        this.DataContext = data; 
public class MyCost 
    public double Cost { get; set; } 
    public double UnitCost { get; set; } 
    public DateTime MyDate { get; set; } 
In this article
Not finding the help you need?