---
layout: post
title: Sparkline types in React Sparkline component | Syncfusion
description: Learn here all about Sparkline types in Syncfusion React Sparkline component of Syncfusion Essential JS 2 and more.
control: Sparkline types 
platform: chart-sdk
documentation: ug
domainurl: https://help.syncfusion.com/chart-sdk
---

# Sparkline types in React Sparkline component

Different types of shapes can be used to represent the sparkline. You can change the sparkline type by setting the type property. Sparkline supports the following types:

* Line
* Column
* Win-Loss
* Pie
* Area

The following code sample shows different types of sparklines.

<!-- markdownlint-disable MD036 -->

**Line**

The [`Line`] type is used to render the sparkline series as line.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
{% include code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs1/app/index.jsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
{% include code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs1/app/index.tsx %}
{% endhighlight %}
{% endtabs %}

 {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs1" %}

**Column**

The [`Column`] type is used to render the sparkline series as column.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
{% include code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs2/app/index.jsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
{% include code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs2/app/index.tsx %}
{% endhighlight %}
{% endtabs %}

 {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs2" %}

**Pie**

The [`Pie`] type is used to render the sparkline series as pie.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
{% include code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs3/app/index.jsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
{% include code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs3/app/index.tsx %}
{% endhighlight %}
{% endtabs %}

 {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs3" %}

**Win Loss**

The [`WinLoss`] type is used to render the sparkline series as Win Loss.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
{% include code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs4/app/index.jsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
{% include code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs4/app/index.tsx %}
{% endhighlight %}
{% endtabs %}

 {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs4" %}

**Area**

The [`Area`] type is used to render the sparkline series as area.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
{% include code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs5/app/index.jsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
{% include code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs5/app/index.tsx %}
{% endhighlight %}
{% endtabs %}

 {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/sparkline-charts/sparkline-types-cs5" %}