Getting Started with WPF Sparkline (SfSparkline)

10 Jul 20264 minutes to read

Creating a Sparkline

The following steps explain how to create a sparkline.

Adding the assembly reference

  • Open the Add Reference window from your project.
  • Choose Assemblies -> Extensions -> Syncfusion.SfChart.WPF
  • Add the following namespace in your XAML page:
xmlns:Syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts"
using Syncfusion.UI.Xaml.Charts;

NOTE

The Add Reference window differs for Visual Basic projects.

Initialize the sparkline

You need to initialize the sparkline represented by the SfLineSparkline class (Syncfusion.UI.Xaml.Charts.SfLineSparkline).

<Syncfusion:SfLineSparkline>

</Syncfusion:SfLineSparkline>
SfLineSparkline sparkline = new SfLineSparkline();

Create a sample data source

Since the above step will produce only an empty sparkline, we need to add some data to the sparkline for plotting. In this step, let’s create a sample data source.

  • C#
    • public class UserProfile
{
    public DateTime TimeStamp { get; set; }
    public double NoOfUsers { get; set; }
}

public class UsersViewModel
{
    public ObservableCollection<UserProfile> UsersList { get; set; }
    public UsersViewModel()
    {
        this.UsersList = new ObservableCollection<UserProfile>();
        DateTime date = DateTime.Today;
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 3000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1), NoOfUsers = 5000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1.5), NoOfUsers = -3000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2), NoOfUsers = -4000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2.5), NoOfUsers = 2000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(3), NoOfUsers = 3000 });
    }
}

    NOTE

    Syncfusion Sparkline also supports an ItemsSource as a collection of double values and any collection inherited from IEnumerable.

    Binding data to the sparkline

    We need to add the above UsersViewModel to the DataContext of the sparkline, bind the data source to the ItemsSource property of the SfLineSparkline, and then map the data using YBindingPath and XBindingPath.

    <Grid.DataContext>
    <local:UsersViewModel/>
</Grid.DataContext>

<Syncfusion:SfLineSparkline
    ItemsSource="{Binding UsersList}"
    XBindingPath="TimeStamp"
    YBindingPath="NoOfUsers">
</Syncfusion:SfLineSparkline>
    SfLineSparkline sparkline = new SfLineSparkline()
{
  ItemsSource = new UsersViewModel().UsersList,
  XBindingPath = "TimeStamp",
  YBindingPath = "NoOfUsers"
};

    NOTE

    If XBindingPath is not mapped, the sparkline data is positioned as indexed.

    The following illustrates the result of the above code sample:

    Binding data to WPF Sparkline

    You can find the complete getting started sample from this link.

    Theme

    SfSparkline supports various built-in themes. Refer to the following links to apply themes to SfSparkline:

    Setting theme to WPF Sparkline