Sparkline Types in WPF Sparkline (SfSparkline)

4 May 20264 minutes to read

Line Sparkline

Line sparkline rendered using polyline and the following code is used to create line sparkline.

XAML

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

<Syncfusion:SfLineSparkline
    ItemsSource="{Binding UsersList}"
    YBindingPath="NoOfUsers">
</Syncfusion:SfLineSparkline>

C#

SfLineSparkline sparkline = new SfLineSparkline()
{
	ItemsSource = new SparkViewModel().UsersList,
	YBindingPath = "NoOfUsers"
};

The following illustrates the result of the above code sample,

Column Sparkline

Column sparkline used to visualize the raw data as a rectangle and following code is used to create column sparkline.

XAML

<Syncfusion:SfColumnSparkline 
    ItemsSource="{Binding UsersList}" 
    YBindingPath="NoOfUsers">
</Syncfusion:SfColumnSparkline>

C#

SfColumnSparkline sparkline = new SfColumnSparkline()
{
	ItemsSource = new SparkViewModel().UsersList,
	YBindingPath = "NoOfUsers"
};

Following is the snapshot for Column Sparkline,

Area sparkline

The following code is used to create area sparkline and all the line sparkline features are applicable for area sparkline.

XAML

<Syncfusion:SfAreaSparkline 
    ItemsSource="{Binding UsersList}" 
    YBindingPath="NoOfUsers">
</Syncfusion:SfAreaSparkline>

C#

SfAreaSparkline sparkline = new SfAreaSparkline()
{
	ItemsSource = new SparkViewModel().UsersList,
	YBindingPath = "NoOfUsers"
};

The following is a snapshot of the area sparkline.

WinLoss Sparkline

WinLoss sparkline render as a column segment and it show the positive, negative and neutral values.

XAML

<Page.DataContext>
	<local:MatchDetailsViewModel/>
</Page.DataContext>

<Syncfusion:SfWinLossSparkline 
	x:Name="sparkline" 
	ItemsSource="{Binding Match}" 
	YBindingPath="Result">
</Syncfusion:SfWinLossSparkline>

C#

SfWinLossSparkline sparkline = new SfWinLossSparkline()
{
    ItemsSource = new MatchDetailsViewModel().Match,
    YBindingPath = "Result"
};

public class MatchDetailsModel
{
    public double Result { get; set; }
    public string Status { get; set; }
}

public class MatchDetailsViewModel
{
    public ObservableCollection<MatchDetailsModel> Match { get; set; }

    public MatchDetailsViewModel()
    {
        this.Match = new ObservableCollection<MatchDetailsModel>();

        this.Match.Add(new MatchDetailsModel() { Result = 1, Status = "Win" });
        this.Match.Add(new MatchDetailsModel() { Result = -1, Status = "Loss" });
        this.Match.Add(new MatchDetailsModel() { Result = 0, Status = "Draw" });
        this.Match.Add(new MatchDetailsModel() { Result = 1, Status = "Win" });
        this.Match.Add(new MatchDetailsModel() { Result = 1, Status = "Win" });
        this.Match.Add(new MatchDetailsModel() { Result = -1, Status = "Loss" });
    }
}

Execute the above code to render the following output.