SparklineTypes.md

layout	title	description	platform	control	documentation
post	Sparkline types	What are the different types of Sparklines available in Essential Xamarin.forms Sparkline.	xamarin	Sparkline	ug

Sparkline Types

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.

The following code is used to create the SfLineSparkline.

{% tabs %}

{% highlight xaml %}

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

{% endhighlight %}

{% highlight c# %}

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

{% endhighlight %}

{% endtabs %}

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.
• Color - used to change the interior color of the column.

The following code is used to create the SfColumnSparkline.

{% tabs %}

{% highlight xaml %}

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

{% endhighlight %}

{% highlight c# %}

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

{% endhighlight %}

{% endtabs %}

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.
• Color - used to change the color of interior area.

The following code is used to create the SfAreaSparkline.

{% tabs %}

{% highlight xaml %}

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

{% endhighlight %}

{% highlight c# %}

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

{% endhighlight %}

{% endtabs %}

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.
• 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.

{% tabs %}

{% highlight xaml %}

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

{% endhighlight %}

{% highlight c# %}

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

{% endhighlight %}

{% endtabs %}