Click here to Skip to main content
13,551,474 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


17 bookmarked
Posted 4 Dec 2011
Licenced CPOL

Candlestick Based off WPF Toolkit

, 4 Dec 2011
Rate this:
Please Sign up or sign in to vote.


Creates Candlesticks chart based on WPFToolkit.


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:


Now you can get the cart as:

 <charting:Chart >

                    ItemsSource="{StaticResource StockDataCollection}"


                    DependentValueBinding="{Binding Path=High}"

                    SizeValueBinding="{Binding Path=WickHeight}"

                    DataPointStyle="{StaticResource CandleStick}"


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

           <ResourceDictionary Source="CandleStickDictionary.xaml" />

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
        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.


  • 4th December, 2011: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Xavier John
Software Developer
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

Questionpls help to solve this error of your code Pin
Kinjal Sucess27-Feb-12 1:54
memberKinjal Sucess27-Feb-12 1:54 
AnswerRe: pls help to solve this error of your code Pin
Xavier John17-Jul-12 6:00
memberXavier John17-Jul-12 6:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180515.1 | Last Updated 4 Dec 2011
Article Copyright 2011 by Xavier John
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid