Introducing FinancialChart for WPF, UWP, and WinForms

ComponentOne Studio's new FlexChart control handles your charting needs for modern visualization and faster rendering. With 2016 v2 release, we've gone a step further to cater to your industry-specific charting needs and included a brand new control: FinancialChart (in beta), built on top of FlexChart control.

Download the FinancialChart Explorer Sample:

WPF | UWP | WinForms

In this blog we'll look at:

About FinancialChart

Created specifically for developers building applications for the financial industry, FinancialChart empowers you to visualize and analyze financial data with minimal coding efforts in WinForms, WPF and UWP (it's already available for MVC and HTML5/Javascript). In addition to the basic charting feature set, FinancialChart comes with built-in technical analysis tools such as Trend Lines, Moving Averages and Financial Indicators that can be used with any financial asset with historical trading data, like stocks, futures and commodities, etc. For detailed information on FinancialChart, check the product's documentation: WPF | UWP | WinForms.

Getting Started with FinancialChart

The easiest way to get started with FinancialChart is by placing the control from the Toolbox on the application’s design surface. Note: For the purpose of this blog post we will be using WPF as the platform. The steps for WinForms and UWP version are almost similar to that of WPF.

  • In the Visual Studio Toolbox, look for “C1FinancialChart” under the “C1WPF 4.0” tab.
  • Drag and drop the FinancialChart control to the design surface. This creates a chart with some dummy data and adds the required references to your project:

FinancialChart with dummy data FinancialChart with dummy data

  • Next, we'll remove the dummy data and specify the chart's ItemsSource and X-axis binding:

    <c1:C1FinancialChart x:Name="financialChart" ItemsSource="{Binding Data}" BindingX="date"></c1:C1FinancialChart>

  • Add a series and provide the bindings for the Y-axis:

    <c1:C1FinancialChart x:Name="financialChart" ItemsSource="{Binding Data}" BindingX="date">  
<c1:FinancialSeries  Binding="high,low,open,close"/>  
</c1:C1FinancialChart>

We haven't set the chart type yet, but before we do that, let's take a look at the different chart types available with FinancialChart control.

Chart Types in FinancialChart

The FinancialChart control offers 15 different chart types in total. In addition to the seven basic chart types—CandleStick, HighLowOpenClose, Column, Scatter, Line, LineSymbols and Area— FinancialChart offers eight specialized charts that are widely used in technical analysis. Let's first understand these specialized chart types from a broader usage perspective. One group that focuses solely on the stock's price movements, and the other focuses on price along with volume,i.e., the number of shares traded over a given period of time . While the price movement helps in identifying market trends, determining their extent and forecasting their direction as early as possible, the volume confirms these price trends and chart patterns. Any price movement up or down with relatively high volume is seen as stronger and more relevant than a similar movement with low volume. The FinancialChart control comes with Heikin-Ashi, Kagi, Renko and the LineBreak chart types to help visualize and analyze these trends with regards to price movement. These charts are used to reduce the market noise by eliminating minor corrections and deviations and show larger trends. FinancialChart also provides ColumnVolume, EquiVolume, CandleVolume and ArmsCandleVolume chart types to help determine the strength or weakness of price movements using volumes. These charts identify whether the interest of traders in a stock is increasing or decreasing. Our "Financial Charts Explained" blog series outlines each of the chart types and how they're used. Here's a video on the different types of financial charts we provide: https://vimeo.com/145304358 Continuing with the application we created in the “Getting Started” section above, let’s now set the Chart Type: 

<c1:C1FinancialChart x:Name="financialChart" ItemsSource="{Binding Data}" BindingX="date" ChartType="HeikinAshi">  
<c1:FinancialSeries  Binding="high,low,open,close" />  
</c1:C1FinancialChart>

Heikin-Ashi chart Heikin-Ashi chart

Trend Lines and Moving Averages

Financial charts are all about trends, be it uptrend or downtrend. Unfortunately, trends are not always easy to spot, as prices do not move in a straight line, but rather in a series of highs and lows. Trend lines draw a straight/curved line superimposed on the chart, revealing the overall direction of data. FinancialChart provides following TrendLine types to help with both trend identification and confirmation:

  • AverageX and AverageY
  • Exponential
  • Fourier
  • Linear
  • Logarithmic
  • MaxX and MaxY
  • MinX and MinY
  • Polynomial
  • Power

In addition, FinancialChart allows adding Moving Averages to analyze data points by creating a series of averages of different subsets of the full data set. The supported MovingAverage types include Exponential, Simple, Triangular and Weighted. FinancialChart with a linear trend line FinancialChart with a linear trend line The following snippet shows how to add a Linear trendline to the FinancialChart: 

<c1:C1FinancialChart x:Name="financialChart" ItemsSource="{Binding Data}" BindingX="date" ChartType="HeikinAshi">  
<c1:FinancialSeries  Binding="high,low,open,close" SeriesName="Heikin-Ashi" />  
<c1:TrendLine Binding="low" FitType="Linear" SeriesName="TrendLine">  
<c1:TrendLine.Style>  
<c1:ChartStyle StrokeThickness="3"/>  
</c1:TrendLine.Style>  
</c1:TrendLine>  
</c1:C1FinancialChart>

Financial Indicators

Although ChartTypes and Trend Lines help with technical analysis, you may also want to apply certain formulas to the price of financial instruments to better forecast the market direction and form a basis for trading decision. Financial Indicators helps by drawing a series of data points based on a trading instrument's historic and current price and/or volume activity. FinancialChart control supports four widely used indicators to let you provide your users further insight into supply and demand of a trading instrument:

Average true range with range selector FinancialChart with an Average True Range indicator The following snippet shows how to display a 14 period ATR indicator: 

<c1:C1FinancialChart x:Name="financialChart" ItemsSource="{Binding Data}" BindingX="date" ChartType="HeikinAshi" Grid.Row="0">  
<c1:FinancialSeries  Binding="high,low,open,close" SeriesName="Heikin-Ashi"/>  
</c1:C1FinancialChart>  
<c1:C1FinancialChart x:Name="indicatorChart" ItemsSource="{Binding Data}" BindingX="date" Grid.Row="2">  
<c1:ATR Binding="high,low,close" Period="14" SeriesName="ATR" />  
</c1:C1FinancialChart>

Download the FinancialChart Explorer Sample:

WPF | UWP | WinForms

GrapeCity

GrapeCity Developer Tools
comments powered by Disqus