How to Display Sparklines in a WPF Datagrid Application

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.

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"/>

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.

Download the sample here.