How to Display Sparklines in a WPF Datagrid Application
Tags: webdev, devops, dotnet, tutorial
Published: 2022-06-28 17:35:05

---
canonical_url: https://www.grapecity.com/blogs/how-to-display-sparklines-in-wpf-datagrid-application
description: Learn how to display sparklines in a WPF datagrid application. See more from ComponentOne today.
---

Charts are the most convenient and efficient way of visualizing data. We all have seen or used charts at some point in our lives—for example, line charts, column charts, pie charts, and more. But sometimes, a traditional chart conveys more information than needed; this is where **Sparklines** comes into the picture.

Sparklines are tiny, lightweight charts that provide a much simpler and compact visualization of data which minimizes the time it takes to understand what is being displayed by the graph.

Sparklines are commonly used to display trends over time, but they can be used to show any trend that could be displayed on a line graph.  They are often used to illustrate stock trends, weather trends, or production rates over time.

In this article, we will see how to display sparklines in ComponentOne WPF DataGrid (FlexGrid) using ComponentOne WPF Sparkline.

### Installing C1Sparkline And C1FlexGrid

Create a new .NET 6 WPF project and add **C1.WPF.Grid** & **C1.WPF.Sparkline** NuGet packages.

![C1.WPF.Sparkline](https://files.grapecity.com/gc-website-media/yiwpsdt0/01-c1wpfgrid.png?width=500&height=136.9268897149938)

Once the NuGet packages are added to your project, we can move to the next step, i.e., _Creating the Sparkline Chart_.

### Creating the Sparkline Chart

#### Binding to Data Source

Bind the FlexGrid to a data source containing a field representing a numeric collection of data that will be used as a data source for our sparklines. For example, a field that implements the IEnumerable or INotifyCollectionChanged interfaces like Array, List, or ObservableCollection.

We will be using the following data item in this blog:

```
    public class StockPriceData
     {
            public string Name { get; private set; }
            public double InvestedAmount { get; private set; }
            public int Quantity { get; private set; }
            public double AverageBuyPrice { get; set; }
            public ObservableCollection<double> PriceData { get;} // To be used as sparklines data source
            public double CurrentAmount {get; set;}
            public double CurrentPrice {get; set;}
            public double Returns {get; set;}
    }
```

We'll bind our grid to a data source containing the information of a dummy stock portfolio, i.e., a collection of the above data item (StockPriceData_) _as follows:

```
    <c1:FlexGrid x:Name="_stockDataGrid" ItemsSource="{Binding StockData}"></c1:FlexGrid>
```

Now we have our grid bound with the appropriate data source. So, the next step will be adding & configuring FlexGrid columns to display sparklines.

#### Using Sparkline

The C1Sparkline control supports three sparkline types, namely Line, Column, and Win-loss, for visualizing data in different contexts. For example, Line charts are suitable for visualizing continuous data, while Column sparklines are used in scenarios involving data comparison. Similarly, a Win-Loss sparkline is best used to visualize a true-false (that is, win-loss) scenario.

Add a new Column, set its **CellTemplate** to C1.WPF.Sparkline.**C1Sparkline **and then bind its **Data** property with the **PriceData** property of StockDataItem as follows:

```
    <c1:FlexGrid.Columns>
          <c1:GridColumn Binding="PriceData" Header="Stock Trend (Line)" Width="150"  >
                 <c1:GridColumn.CellTemplate>
                       <DataTemplate>
                             <c1:C1Sparkline Data="{Binding PriceData}" />
                       </DataTemplate>
                 </c1:GridColumn.CellTemplate>
           </c1:GridColumn>
    </c1:FlexGrid.Columns>
```

Since we have continuous data (stock price data for 10 seconds) in this case, we'll be using the Line sparkline type. To change the sparkline type, we can set C1Sparkline's **SparklineType** property to **Line**. You can also use markers to highlight individual data points on a sparkline to make it more readable. For example, to highlight the highest and the lowest stock price values in the sparklines, set the **ShowHigh **and **ShowLow **properties of the Sparkline class to true, as shown:

```
    <c1:C1Sparkline Data="{Binding PriceData}" SparklineType="Line" ShowHigh="True"  ShowLow="True"/>
```

#### ![Sparklines](https://files.grapecity.com/gc-website-media/cjzngblv/02-sparklines.gif?width=500&height=248.32962138084633)

#### Styling Sparklines

C1Sparkline provides various styling options to customize its appearance. For example, you can customize the series/axis/data-points color, series line thickness, and more. Please refer to the same from [**here**](https://www.grapecity.com/componentone/docs/wpf/online-sparkline/stylingandappearance.html).

Download the sample [**here**](https://files.grapecity.com/gc-website-media/45wpcymm/wpfflexgridsparklines.zip).