Click here to Skip to main content
Click here to Skip to main content

Tagged as

Candlestick Based off WPF Toolkit

, 4 Dec 2011
Rate this:
Please Sign up or sign in to vote.
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:

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

  • 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)

Share

About the Author

Xavier John
Software Developer
United States United States
No Biography provided

Comments and Discussions

 
QuestionBottom of candles cut off PinmemberMember 1014814510-Jul-13 4:10 
QuestionUpdate the chart PinmemberMember 96844256-Jan-13 21:31 
BugProblem with resizing Pinmembersystemzax15-Sep-12 3:13 
Hi!
 
Great job with this proof of concept. I'm very new to WPF and there's an issue I haven't been able to solve.
 
When I resize the chart horizontally to the minimum size possible, and then resize it back to the maximum size possible, the chart adds new empty data points on each side. This causes the candles to be squeezed together in the middle of the chart.
 
Is there any way to make sure the number of datapoints visible stays the same through resize operations?
 
Thanks
QuestionThanks... F1 F1 F1 Pinmemberamity200115-Jul-12 18:45 
AnswerRe: Thanks... F1 F1 F1 PinmemberXavier John17-Jul-12 5:52 
Questionpls help to solve this error of your code PinmemberKinjal Sucess27-Feb-12 1:54 
AnswerRe: pls help to solve this error of your code PinmemberXavier John17-Jul-12 6:00 
GeneralMy vote of 5 PinmemberEspiritu5-Dec-11 17:23 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140902.1 | Last Updated 4 Dec 2011
Article Copyright 2011 by Xavier John
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid