Chart of the Week: Creating a WPF Fast Line Chart for Cryptocurrency Trade Analysis
Tags: wpf, chart, datavisualization, ui
Published: 2023-11-22 15:42:42

---
title: Chart of the Week: Creating a WPF Fast Line Chart for Cryptocurrency Trade Analysis
published: true
date: 2023-11-22 10:31:39 UTC
tags: wpf, chart, datavisualization, ui
canonical_url: https://www.syncfusion.com/blogs/post/wpf-fast-line-chart-crypto-trade.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qedpqw14iisxgvwsyan.png
---
Welcome to our  **Chart of the Week**  blog series!

Today, we‘ll use the [Syncfusion WPF Fast Line Chart](https://help.syncfusion.com/wpf/charts/fastchart/fast-series#fast-line "Getting started with Syncfusion WPF Fast Line Chart") to visualize cryptocurrency trade analysis, focusing on the historical price trends and trading volumes of Bitcoin.

 We will put particular emphasis on how the value of Bitcoin has evolved over a specific time frame. This blog aims to provide a comprehensive understanding of cryptocurrency trade analysis. ![Visualizing Bitcoin trade data using Syncfusion WPF Fast Line Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Bitcoin-price-history-and-volume-of-bitcoin-traded.gif)

Let’s get started!

## Step 1: Collecting the data

First, we need to collect cryptocurrency trade data on Bitcoin’s price and volume trends from [Yahoo Finance](https://finance.yahoo.com/quote/BTC-USD/history?period1=1577836800&period2=1672531200&interval=1d&filter=history&frequency=1d&includeAdjustedClose=true "Bitcoin's price and volume trends in Yahoo Finance"). Specifically, we’ll use data from Jan. 1, 2020, to Jan. 1, 2023.

## Step 2: Preparing the data for the chart

Then, create the **BitCoinModel** class to store Bitcoin data using the **Date** , **BitCoinPrice** , and **Volume** properties.

Refer to the following code example.

```csharp
public class BitCoinModel
{
    public DateTime Date { get; set; }
    public double BitCoinPrice { get; set; }
    public double Volume { get; set; }
    public BitCoinModel(DateTime dateTime, double bitCoinPrice, double volume)
    {
        Date = dateTime;
        BitCoinPrice = bitCoinPrice;
        Volume = volume;
    }
}
```

Next, generate the Bitcoin data collection using the **BitCoinViewModel** class and its **BitcoinCollection** property. Then, assign the CSV data to the Bitcoin data collection using the **ReadCSV** method, which stores it in the **BitcoinCollection** property.

Refer to the following code example.

```csharp
public class BitCoinViewModel
{
    List<BitCoinModel> bitCoinCollection;
    public List<BitCoinModel> BitCoinCollection
    {
        get
        {
            return bitCoinCollection;
        }
        set
        {
            bitCoinCollection = value;
        }
    }
    public BitCoinViewModel()
    {
        BitCoinCollection = new List<BitCoinModel>();
        ReadCSV("BitCoinTradeAnalysisDemo.Resources.data.csv");
    }
    private void ReadCSV(string resourceStream)
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream? inputStream = executingAssembly.GetManifestResourceStream(resourceStream);
        string? line;
        List<string> lines = new List<string>();
        if (inputStream != null)
        {
            using StreamReader reader = new StreamReader(inputStream);
            while ((line = reader.ReadLine()) != null)
            {
                lines.Add(line);
            }
            lines.RemoveAt(0);
            foreach (var dataPoint in lines)
            {
                string[] data = dataPoint.Split(',');
                //To get the date data.
                DateTime date = DateTime.Parse(data[0]); 
                //To get the price data in thousands (K).
                var price = Convert.ToDouble(data[5])/1000; 
                //To get the volume data in billions (B).
                var volume = Convert.ToDouble(data[6])/ 1000000000; 
                BitCoinCollection.Add(new BitCoinModel(date, Math.Round(price, 2), Math.Round(volume, 2)));
            }
        }
    }
}
```

## Step 3: Configuring the Syncfusion WPF Charts control

Configure the Syncfusion WPF Charts control by following this [documentation](https://help.syncfusion.com/wpf/charts/getting-started "Getting started with Syncfusion WPF Charts").

Refer to the following code example.

```xml
<chart:SfChart>
    
 <!--Initialize the axis for chart-->
 <chart:SfChart.PrimaryAxis>
  <chart:DateTimeAxis>
  </chart:DateTimeAxis>
 </chart:SfChart.PrimaryAxis>
    
 <chart:SfChart.SecondaryAxis>
  <chart:NumericalAxis>
  </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>

</chart:SfChart>
```

## Step 4: Binding data to the chart

We’ll be utilizing the Syncfusion WPF [FastLineSeries](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastLineSeries.html "FastLineSeries Class of WPF Charts") instance to bind the Bitcoin data. This will enable us to analyze cryptocurrency trading trends effectively in the chart.

In this example, we need two fast-line series, one to analyze Bitcoin price and another to analyze Bitcoin volume. The Syncfusion WPF Charts control provides a way to arrange multiple series inside the same chart area.

Refer to the following code example.

```xml
<chart:SfChart>
    
 <!--Initialize the series for chart-->
 <chart:FastLineSeries ItemsSource="{Binding BitCoinCollection}"
                       XBindingPath="Date" 
                       YBindingPath="BitCoinPrice">
 </chart:FastLineSeries>
 <chart:FastLineSeries ItemsSource="{Binding BitCoinCollection}"
                       XBindingPath="Date" 
                       YBindingPath="Volume">
 </chart:FastLineSeries>

</chart:SfChart>
```

In the previous code example for Bitcoin price data, we bound the **BitCoinCollection** with the [ItemSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ItemsSource "ItemSource property of WPF Charts") property. We also specified the [XBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath "XBindingPath property of WPF Charts") and [YBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries.html#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath "YBindingPath property of WPF Charts") with the **Date** and **BitCoinPrice** properties, respectively.

For Bitcoin volume data, we associated the **BitCoinCollection** with the [ItemSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ItemsSource "ItemSource property of WPF Charts") property and designated the [XBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath "XBindingPath property of WPF Charts") and [YBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries.html#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath "YBindingPath property of WPF Charts") using the **Date** and **Volume** properties, respectively.

## Step 5: Multi-Axis integration

As I said before, for this demo, we’ll utilize two **fast-line** series to analyze Bitcoin price and volume data. To do this, we use a shared x-axis and two y-axis for Bitcoin price and another for Bitcoin volume analysis.

In **SfChart**, each series type includes two properties: **XAxis** and **YAxis** , which support [multiple axes](https://help.syncfusion.com/wpf/charts/axis#multiple-axes "Multiple axes support in WPF Charts"). For the Bitcoin price **FastLineSeries** , it automatically uses the chart’s default x- and y-axes. To add an additional y-axis for the Bitcoin volume **FastLineSeries** , you must assign the required y-axis within the series.

Refer to the following code example to add an additional y-axis for representing Bitcoin volume in the fast line graph.

```xml
<chart:SfChart >    
 
 <!—Series 1-->
 <chart:FastLineSeries>
 </chart:FastLineSeries>
 
 <!—Series 2 with additional y- axis-->
 <chart:FastLineSeries>
  <chart:FastLineSeries.YAxis>
   <chart:NumericalAxis/>
  </chart:FastLineSeries.YAxis>
 </chart:FastLineSeries>

</chart:SfChart>
```

## Step 6: Customizing the chart appearance

We can enhance the appearance of the WPF fast line chart by customizing its elements.  

### Personalized titles

We can employ the [Header](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Header "Header property of WPF Charts") property to define the chart’s title, improving the readability of the displayed data. Additionally, the header can be positioned on the left or right side of the chart using the [HorizontalHeaderAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_HorizontalHeaderAlignment "HorizontalHeaderAlignment property of WPF Charts") property.

Refer to the following code example.

```xml
<chart:SfChart HorizontalHeaderAlignment="Left" >
    
 <chart:SfChart.Header>
  <Border BorderBrush="White" Margin="0, 0, 0, 10">
   <StackPanel Orientation="Horizontal">
    <Grid Width="10" Background="#2C8CEE" Margin="0, 8, 0, 5"/>
    <StackPanel>
     <TextBlock FontSize="25" Margin="5" Text="Bitcoin price history from January 2020 to January 2022"/>
     <TextBlock FontSize="14" Margin="5" Text="The price of a bitcoin in USD, and the volume of bitcoins traded in USD."/>
    </StackPanel>
   </StackPanel>        
  </Border>
 </chart:SfChart.Header>

</chart:SfChart>
```

### Axis customization

We can customize the chart axis and its elements like in the following code example. For better readability, we will make the y-axis representing Bitcoin volume invisible by setting the axis **Visibility** property to **Collapsed**.

**XML**

```xml
<chart:SfChart>
    
 <chart:SfChart.Resources>
  <Style TargetType="Line" x:Key="secondaryTicklineStyle">
   <Setter Property="Stroke" Value="LightGray"/>
   <Setter Property="StrokeThickness" Value="0"/>
  </Style>
  <DataTemplate x:Key="postfixLabelTemplate">
   <TextBlock FontSize="10" VerticalAlignment="Center" Text="K"/>
  </DataTemplate>
 </chart:SfChart.Resources>

 <!--Initialize the axis for the chart-->
 <chart:SfChart.PrimaryAxis>
  <chart:DateTimeAxis IntervalType="Months" Interval="3" 
                      LabelFormat="dd-MMM-yy"
                      LabelCreated="DateTimeAxis_LabelCreated"
                      EdgeLabelsDrawingMode="Shift"
                      EdgeLabelsVisibilityMode="AlwaysVisible"
                      ShowGridLines="False">
  </chart:DateTimeAxis>
 </chart:SfChart.PrimaryAxis>
    
 <chart:SfChart.SecondaryAxis>
  <chart:NumericalAxis ShowGridLines="True" 
         PostfixLabelTemplate="{StaticResource postfixLabelTemplate}"
         OpposedPosition="True" Interval="10"
         MajorTickLineStyle="{StaticResource secondaryTicklineStyle}">
   <chart:NumericalAxis.AxisLineStyle>
    <Style TargetType="Line">
     <Setter Property="Stroke" Value="White"/>
    </Style>
   </chart:NumericalAxis.AxisLineStyle>
  </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>

 <!--Initialize the series 1 for chart-->
 <chart:FastLineSeries>
 </chart:FastLineSeries>
                              
 <!—Series 2 with additional y-axis-->
 <chart:FastLineSeries>
  <chart:FastLineSeries.YAxis>
   <chart:NumericalAxis ShowGridLines="False" Visibility="Collapsed"/>
  </chart:FastLineSeries.YAxis>
 </chart:FastLineSeries>

</chart:SfChart>
```

**C#**

```csharp
private void DateTimeAxis_LabelCreated(object sender, LabelCreatedEventArgs e)
{
    var axis = sender as DateTimeAxis;
    if (axis != null)
    {
        if (DateTime.TryParse(e.AxisLabel.LabelContent.ToString(), out var axisValue))
        {
            e.AxisLabel.LabelContent = axisValue.ToString("MMM-yy", CultureInfo.InvariantCulture);
        }
    }
}
```

### Series customization

Refer to the following code example to set the fill colors for the **FastLineSeries** using the [Interior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Interior "Interior property of WPF Charts") property.

```xml
<chart:SfChart>

 <chart:FastLineSeries Interior="#2C8CEE">
 </chart:FastLineSeries>
 <chart:FastLineSeries Interior="LightGray">
 </chart:FastLineSeries>

</chart:SfChart>
```

## Step 7: Adding interactivity support

We’ll incorporate the [Trackball](https://help.syncfusion.com/wpf/charts/interactive-features/trackball "Trackball feature in WPF Charts") feature, which enhances interactivity by allowing you to track a data point with the cursor closely.

Refer to the following code example.

```xml
<chart:SfChart>
  <chart:SfChart.Resources>
  <DataTemplate x:Key="trackballLabelTemplate">
   <Border CornerRadius="5" BorderThickness="1" 
           Background="White" Margin="8">
    <StackPanel>
     <TextBlock Foreground="Blue" FontWeight="Bold" Text="Bitcoin Price"/>
     <TextBlock Foreground="Black" Text="{Binding ValueY, StringFormat={}{0}K}"/>
    </StackPanel>
   </Border>
  </DataTemplate>
  
  <DataTemplate x:Key="trackballLabelTemplate2">
   <Border CornerRadius="5" BorderThickness="1" 
           Background="White" Margin="8">
    <StackPanel>
     <TextBlock Foreground="#808080" Text="Volume" FontWeight="Bold"/>
     <TextBlock Foreground="Black" Text="{Binding ValueY, StringFormat={}{0}B}"/>
    </StackPanel>
   </Border>
  </DataTemplate>
 </chart:SfChart.Resources>
  
 <!--Initialize the axis for chart-->
 <chart:SfChart.PrimaryAxis>
  <chart:DateTimeAxis ShowTrackBallInfo="True">
  </chart:DateTimeAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.Behaviors>
  <chart:ChartTrackBallBehavior/>
 </chart:SfChart.Behaviors>
 
 <!--Initialize the series 1 for chart-->
 <chart:FastLineSeries ShowTrackballInfo="True" TrackBallLabelTemplate="{StaticResource trackballLabelTemplate}">		
 </chart:FastLineSeries>

 <!--Series 2 with additional Y y-axis-->
 <chart:FastLineSeries ShowTrackballInfo="True" TrackBallLabelTemplate="{StaticResource trackballLabelTemplate2}"/>

</chart:SfChart>
```

## Step 8: Adding chart annotations

You can add annotations to pinpoint specific areas of interest within the chart. In this instance, we’ll use [text annotations](https://help.syncfusion.com/wpf/charts/annotations#text-annotation "Text Annotation in WPF Charts") to emphasize particular contexts within the chart area.

Refer to the following code example.

```xml
<chart:SfChart> 
 
 <chart:SfChart.Annotations>        
  <chart:TextAnnotation Text="Price" X1="2020/10/25" Y1="30.5" 
                        Foreground="#2C8CEE" FontSize="15"
                        FontWeight="Bold"/>
  <chart:TextAnnotation Text="in USD" X1="2020/10/18" Y1="27.7" 
                        Foreground="#2C8CEE" FontSize="15”
                        FontWeight="Bold"/>
  <chart:TextAnnotation Text="Volume" X1="2021/06/15" Y1="15.7" 
                        Foreground="DarkGray" FontSize="15”
                        FontWeight="Bold"/>
  <chart:TextAnnotation Text="(different scale)" X1="2021/05/25" Y1="12.7" 
                        Foreground="DarkGray" FontSize="15" 
                        FontWeight="Bold"/> 
 </chart:SfChart.Annotations>

</chart:SfChart>
```

After executing the previous code examples, we’ll get an output like in the following GIF image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Visualizing-cryptocurrency-trade-data-using-the-WPF-fast-line-chart.gif" alt="Visualizing cryptocurrency trade data using the WPF Fast Line Chart" style="width:100%">

  <figcaption>Visualizing cryptocurrency trade data using the WPF Fast Line Chart</figcaption>

</figure>

## GitHub reference

For more information, refer to the demo on [GitHub](https://github.com/SyncfusionExamples/Creating-a-WPF-FastLine-Chart-for-CryptoCurrency-Trade-Analysis "Creating a WPF FastLine Chart for CryptoCurrency Trade Analysis GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve explored how to visualize the data on cryptocurrency trade trends using the [Syncfusion WPF Fast Line Chart](https://help.syncfusion.com/wpf/charts/fastchart/fast-series#fast-line "WPF Fast Line Chart"). We encourage you to follow the steps outlined in this blog and share your feedback in the comments section below.

Current customers can download the new version of Essential Studio from the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page") page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products") to check out the Charts control’s features.

If you require assistance, please don’t hesitate to contact us via our [support forum](https://www.syncfusion.com/forums "Synfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Synfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Synfusion Feedback Portal"). We are always eager to help you!

## Related blogs

- [Chart of the Week: Creating a WPF Column Chart for Countries with the Most Active Volcanoes](https://www.syncfusion.com/blogs/post/wpf-column-chart-active-volcano.aspx "Blog: Chart of the Week: Creating a WPF Column Chart for Countries with the Most Active Volcanoes")
- [Streamline Your WPF Development with Syncfusion: Introducing the WPF Template Studio for Visual Studio](https://www.syncfusion.com/blogs/post/wpf-template-studio-visual-studio.aspx "Blog: Streamline Your WPF Development with Syncfusion: Introducing the WPF Template Studio for Visual Studio")
- [Chart of the Week: Creating A Trend Line Using WPF Charts to Visualize Rapid Heating in North American Oceans](https://www.syncfusion.com/blogs/post/trend-line-wpf-chart-visualize-heating-north-american-oceans.aspx "Blog: Chart of the Week: Creating A Trend Line Using WPF Charts to Visualize Rapid Heating in North American Oceans")
- [Chart of the Week: Creating a WPF Doughnut Chart for the Top Rice-Exporting Countries](https://www.syncfusion.com/blogs/post/wpf-doughnut-chart-rice-exporting-countries.aspx "Blog: Chart of the Week: Creating a WPF Doughnut Chart for the Top Rice-Exporting Countries")