Sparkline Types in UWP Sparkline (SfSparkline)

10 May 20212 minutes to read

Line Sparkline

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

<Grid.DataContext>

<local:UsersViewModel/>

</Grid.DataContext>

<Syncfusion:SfLineSparkline Interior="#4a4a4a"  

BorderBrush="DarkGray" BorderThickness="1"                 

ItemsSource="{Binding UsersList}" 

YBindingPath="NoOfUsers">

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

	ItemsSource = new SparkViewModel().UsersList,

	YBindingPath = "NoOfUsers"

};

Line Sparkline

Column Sparkline

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

<Syncfusion:SfColumnSparkline 
	
Interior="#4a4a4a" BorderBrush="DarkGray"    

BorderThickness="1" ItemsSource="{Binding UsersList}" 

YBindingPath="NoOfUsers">

</Syncfusion:SfColumnSparkline >
SfColumnSparkline sparkline = new SfColumnSparkline()
{

	ItemsSource = new SparkViewModel().UsersList,

	YBindingPath = "NoOfUsers"

};

Column Sparkline

Area Sparkline

An area sparkline is a line sparkline with the area between its points and the horizontal axis colored in. The following code is used to create an area sparkline. All line sparkline features are applicable for area sparklines.

<Syncfusion:SfAreaSparkline  

Interior="#4a4a4a" BorderBrush="DarkGray"     

BorderThickness="1" ItemsSource="{Binding UsersList}"   

YBindingPath="NoOfUsers">

</Syncfusion:SfAreaSparkline >
SfAreaSparkline sparkline = new SfAreaSparkline()
{

	ItemsSource = new SparkViewModel().UsersList,

	YBindingPath = "NoOfUsers"

};

Area Sparkline

Win-Loss Sparkline

A win-loss sparkline renders as column segments and shows positive, negative, and neutral values.

<Syncfusion:SfWinLossSparkline Interior="#4a4a4a" BorderBrush="DarkGray"    

BorderThickness="1" 

x:Name="sparkline" ItemsSource="{Binding Match}"   

YBindingPath="Result" >

</Syncfusion:SfWinLossSparkline>
SfWinLossSparkline sparkline = new SfWinLossSparkline()
{

	ItemsSource = new SparkViewModel().Match,

	YBindingPath = "Result"

};

WinLoss Sparkline