Download source - 137.24 KB

Introduction

Creates Candlesticks chart based on WPFToolkit.

Background

I spent a lot of time trying to get candle sticks to work and looking for samples on the web. Finally the solution in this article is what I came up with. The idea is to apply a style on the BubbleSeries to make a candle. If you have a better way of doing it, please let me know and I will update the article.

What is a CandleStick?

The color of the candlestick, red or green by default, is determined by where the current candlestick closed in relation to the previous candlestick.

The candlestick will be red if it closes lower that the previous candle's close.

The candlestick will be green if it closes higher that the previous candle's close.

Some candlesticks will be filled (solid), and some will be unfilled (hollow) based on where the current candle closes relative to its open price.

If the candlestick closes lower than it opened, the candle will be filled.

If the candlestick closes higher than it opened, the candle will be unfilled.

Using the Code

Add the files under the CandleStick folder to your project.

In the .xaml where you need the chart, add the namespace:

xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;
assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:local="clr-namespace:CandleStickChart"

Now you can get the cart as:

 <charting:Chart >
    <local:CandleStickSeries 
                    ItemsSource="{StaticResource StockDataCollection}"
                    IndependentValuePath="Date"
                    DependentValueBinding="{Binding Path=High}"
                    SizeValueBinding="{Binding Path=WickHeight}"
                    DataPointStyle="{StaticResource CandleStick}"
                    Title="Stock">
    </local:CandleStickSeries>
</charting:Chart>

ResourceDictionary

ResourceDictionary contains the style to model the Bubble as a Candle. Make sure you update your App.xaml to merge the dictionary as:

 <Application.Resources>
   <ResourceDictionary> 
       <ResourceDictionary.MergedDictionaries>
           <ResourceDictionary Source="CandleStickDictionary.xaml" />
       </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>         
</Application.Resources>

Behind the Scenes

Let's look at the data structures.

StockData is self explanatory.

public class StockData
{
   public DateTime Date { get; set; }
   public double Open { get; set; }
   public double High { get; set; }
   public double Low { get; set; }
   public double Close { get; set; }
   public int Volume { get; set; }
}

CandleStickViewModel contains the mathematics needed by the view to display the candle, like the Wick Height, Body Height, adjusting the origin of the body.

CandleStickViewModelCollection contains all the candles. Since the color of the candle depends on the previous candle, it will not display the first candle.

The following method gets the Origin of the Body almost correct relative to the Wick and hopefully someone can give me the perfect math for it. I have noticed the body is not perfectly in place.

public Point Origin
{
    get
    { 
        Point origin = new Point() { X = 0 };
        var top = Open > Close ? Open : Close;
        origin.Y = (High - top + (BodyHeight/2)) / WickHeight ;
        return origin;
    }
}

CandleStickSeries contains the code to convert the Candle data points to canvas coordinates.

Points of Interest

To create a hollow candle, I tried to use the polygon instead of the two rectangles but I could not get it to scale correctly. If I did not fill the Body rectangle with light gray, we will be able to see the rectangle used to draw the wick.

History

4^th December, 2011: Initial post

Candlestick Based off WPF Toolkit