Click here to Skip to main content
15,867,488 members
Articles / Desktop Programming / WPF

Candlestick Based off WPF Toolkit

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
4 Dec 2011CPOL2 min read 48.1K   1.9K   19   12
Candlestick

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.

CandleStick.jpg

Using the Code

Add the files under the CandleStick folder to your project.

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

XML
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:

XML
 <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:

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

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

C#
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

  • 4th December, 2011: Initial post

License

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


Written By
Software Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionfix the logic of Origin Pin
hdlee24-Oct-17 15:53
hdlee24-Oct-17 15:53 
QuestionStackOverflowException for larger number of CandleSticks (40+) Pin
Member 375443313-Oct-16 9:11
Member 375443313-Oct-16 9:11 
QuestionBottom of candles cut off Pin
Member 1014814510-Jul-13 4:10
Member 1014814510-Jul-13 4:10 
AnswerRe: Bottom of candles cut off Pin
hdlee24-Oct-17 23:04
hdlee24-Oct-17 23:04 
QuestionUpdate the chart Pin
Member 96844256-Jan-13 21:31
Member 96844256-Jan-13 21:31 
BugProblem with resizing Pin
systemzax15-Sep-12 3:13
systemzax15-Sep-12 3:13 
QuestionThanks... F1 F1 F1 Pin
Amit Developer15-Jul-12 18:45
Amit Developer15-Jul-12 18:45 
AnswerRe: Thanks... F1 F1 F1 Pin
Xavier John17-Jul-12 5:52
Xavier John17-Jul-12 5:52 
GeneralRe: Thanks... F1 F1 F1 Pin
Member 375443313-Oct-16 9:23
Member 375443313-Oct-16 9:23 
Questionpls help to solve this error of your code Pin
Kinjal Sucess27-Feb-12 1:54
Kinjal Sucess27-Feb-12 1:54 
AnswerRe: pls help to solve this error of your code Pin
Xavier John17-Jul-12 6:00
Xavier John17-Jul-12 6:00 
GeneralMy vote of 5 Pin
Espiritu5-Dec-11 17:23
Espiritu5-Dec-11 17: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.