Click here to Skip to main content
15,170,745 members
Articles / Desktop Programming / WPF
Posted 4 Dec 2011

Tagged as


19 bookmarked

Candlestick Based off WPF Toolkit

Rate me:
Please Sign up or sign in to vote.
5.00/5 (5 votes)
4 Dec 2011CPOL2 min read


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

Comments and Discussions

Questionfix the logic of Origin Pin
hdlee24-Oct-17 16:53
Memberhdlee24-Oct-17 16:53 
QuestionStackOverflowException for larger number of CandleSticks (40+) Pin
Member 375443313-Oct-16 10:11
MemberMember 375443313-Oct-16 10:11 
QuestionBottom of candles cut off Pin
Member 1014814510-Jul-13 5:10
MemberMember 1014814510-Jul-13 5:10 
This is excellent code. Anybody figure out how to fix the problem of the bottom of the candle being cut off? The y axis is scaled just based on the High of the candle, so often the Low of the candle is not on the chart?
AnswerRe: Bottom of candles cut off Pin
hdlee25-Oct-17 0:04
Memberhdlee25-Oct-17 0:04 
QuestionUpdate the chart Pin
Member 96844256-Jan-13 22:31
MemberMember 96844256-Jan-13 22:31 
BugProblem with resizing Pin
systemzax15-Sep-12 4:13
Membersystemzax15-Sep-12 4:13 
QuestionThanks... F1 F1 F1 Pin
Amit Developer15-Jul-12 19:45
MemberAmit Developer15-Jul-12 19:45 
AnswerRe: Thanks... F1 F1 F1 Pin
Xavier John17-Jul-12 6:52
MemberXavier John17-Jul-12 6:52 
GeneralRe: Thanks... F1 F1 F1 Pin
Member 375443313-Oct-16 10:23
MemberMember 375443313-Oct-16 10:23 
Questionpls help to solve this error of your code Pin
Kinjal Sucess27-Feb-12 2:54
MemberKinjal Sucess27-Feb-12 2:54 
AnswerRe: pls help to solve this error of your code Pin
Xavier John17-Jul-12 7:00
MemberXavier John17-Jul-12 7:00 
GeneralMy vote of 5 Pin
Espiritu5-Dec-11 18:23
MemberEspiritu5-Dec-11 18:23 

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.