Sparkline Types in Xamarin Sparkline (SfSparkline)

18 May 20215 minutes to read

Line Sparkline

SfLineSparkline is used for identifying patterns and trends in the data such as seasonal effects, large changes and turning points over a period of time.

• StrokeWidth - used to change the stroke width of the sparkline.

• StrokeColor - used to change the stroke color of the sparkline.

• MinimumYValue - used to set the minimum value of the y-axis in sparkline.

• MaximumYValue - used to set the maximum value of the y-axis in sparkline.

The following code is used to create the SfLineSparkline.

XAML

<sparkline:SfLineSparkline ItemsSource = "{Binding Data}" 
                           YBindingPath = "Performance"> 
</sparkline:SfLineSparkline>

C#

SfLineSparkline lineSparkline = new SfLineSparkline()
{
   ItemsSource = viewModel.Data,
   YBindingPath = "Performance"           
};

Column Sparkline

SfColumnSparkline is very similar to a line sparkline in the sense that it is designed to show different values of two or more subjects but instead of using lines it is using horizontal and vertical bars that represent a different value.

• StrokeWidth - used to change the stroke width of the sparkline.

• StrokeColor - used to change the stroke color of the sparkline.

• MinimumYValue - used to set the minimum value of the y-axis in sparkline.

• MaximumYValue - used to set the maximum value of the y-axis in sparkline.

• Color - used to change the interior color of the column.

The following code is used to create the SfColumnSparkline.

XAML

<sparkline:SfColumnSparkline ItemsSource = "{Binding Data}" 
                             YBindingPath = "Performance"> 
</sparkline:SfColumnSparkline>

C#

SfColumnSparkline columnSparkline = new SfColumnSparkline()
{
   ItemsSource = viewModel.Data,
   YBindingPath = "Performance"            
};

Area Sparkline

SfAreaSparkline is used to emphasize a change in values. This is primarily used when the magnitude of the trend is to be communicated rather than individual data values.

• StrokeWidth - used to change the stroke width of the sparkline.

• StrokeColor - used to change the stroke color of the sparkline.

• MinimumYValue - used to set the minimum value of the y-axis in sparkline.

• MaximumYValue - used to set the maximum value of the y-axis in sparkline.

• Color - used to change the color of interior area.

The following code is used to create the SfAreaSparkline.

XAML

<sparkline:SfAreaSparkline ItemsSource = "{Binding Data}"
                           YBindingPath = "Performance"> 
</sparkline:SfAreaSparkline>

C#

SfAreaSparkline areaSparkline = new SfAreaSparkline()
{
   ItemsSource = viewModel.Data,
   YBindingPath = "Performance"            
};

WinLoss Sparkline

SfWinLossSparkline is used to show whether each value is positive or negative visualizing a Win/Loss scenario. You can use the following properties to customize the appearance.

• StrokeWidth - used to change the stroke width of the sparkline.

• StrokeColor - used to change the stroke color of the sparkline.

• MinimumYValue - used to set the minimum value of the y-axis in sparkline.

• MaximumYValue - used to set the maximum value of the y-axis in sparkline.

• Color - used to change the interior color of the positive columns.

• NeutralPointColor - used to change the interior color of the neutral columns.

The following code is used to create the SfWinLossSparkline.

XAML

<sparkline:SfWinLossSparkline ItemsSource = "{Binding Data}" 
                              YBindingPath = "Performance"> 
</sparkline:SfWinLossSparkline >

C#

SfWinLossSparkline winLossSparkline = new SfWinLossSparkline()
{
   ItemsSource = viewModel.Data,
   YBindingPath = "Performance"
};