Click here to Skip to main content
13,704,418 members
Click here to Skip to main content
Add your own
alternative version


65 bookmarked
Posted 16 Feb 2009
Licenced CPOL

How to create stock charts using the Silverlight Toolkit

, 16 Feb 2009
Rate this:
Please Sign up or sign in to vote.
An article on how to create a Candlestick stock chart using the Silverlight Toolkit.


The Silverlight Toolkit is a collection of Silverlight controls, components, and utilities made available outside the normal Silverlight release cycle. It adds new functionality quickly for designers and developers, and provides the community an efficient way to help shape product development by contributing ideas and bug reports. It includes full source code, Unit Tests, samples, and documentation for 12 new controls covering charting, styling, layout, and user input.

The Silverlight Toolkit gives us an incredibly powerful charting control for Silverlight! The one type of chart that is still relatively difficult to create using this toolkit is stock charts (OHLC or Candlestick).

A candlestick chart is a style of bar-chart used primarily to describe price movements of an equity over time.

It is a combination of a line-chart and a bar-chart, in that each bar represents the range of price movement over a given time interval. It is most often used in technical analysis of equity and currency price patterns. They appear superficially similar to error bars, but are unrelated.

Luckily the Silverlight Toolkit is also very customizable. This article will show a method of extending the Silverlight Toolkit to allow for the creation of stock charts.

The Basics


Each chart can contain multiple series. The Silverlight Toolkit has some common series:

  • BarSeries
  • BubbleSeries
  • ColumnSeries
  • LineSeries
  • PieSeries
  • ScatterSeries

We will be creating our own CandlestickSeries by deriving from DataPointSingleSeriesWithAxes:

public sealed partial class CandlestickSeries : DataPointSingleSeriesWithAxes 
    // ... 

DataPointSingleSeriesWithAxes is a dynamic series with axes, and only one legend item and style for all data points.

Each series contains multiple data points:

public sealed partial classCandlestickDataPoint : DataPoint 
    // ... 

DataPoint represents a control that displays a data point.

Now that we have the basics (a chart has a series, and each series has data points), let's dig deeper to see how it works…


The CandlestickDataPoint will be responsible for rendering the candlestick. Each candlestick has a shadow and body. Here is the default control template for the CandlestickDataPoint:

<ControlTemplate TargetType="charting:CandlestickDataPoint">
   <Border x:Name="Root" Opacity="0" 

      BorderBrush="{x:Null}" BorderThickness="0" 

   <!-- Removed the VSM stuff for brevity -->
      <Grid x:Name="PART_Shadow">
         <Rectangle Fill="Black" Width="1" />
      <Grid x:Name="PART_Body" 

               Background="{TemplateBinding Background}" 

         <Rectangle Fill="{TemplateBinding Background}" />
               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="#64686868" />
                  <GradientStop Color="#FF4D4C4C" Offset="0.996" />
        <Rectangle RenderTransformOrigin="0.5,0.5" 

                Margin="19,19,17,17" Opacity="0.245">
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                 <GradientStop Color="#FF919191" />
                 <GradientStop Color="#FFFFFFFF" Offset="1" />
                 <ScaleTransform />
                 <SkewTransform />
                 <RotateTransform />
                 <TranslateTransform X="0.5" Y="0.5" />
        <Rectangle x:Name="MouseOverHighlight" Opacity="0" 

                 Fill="#FF9B1C1C" Stroke="#FF000000" />
        <Rectangle x:Name="SelectionHighlight" 

                 Opacity="0" Fill="#3EF0F0F0" />

Each CandlestickDataPoint also has the following DPs (these are needed for the calculation of the body size):

  • Open
  • Close
  • High
  • Low

The only “tricky” thing about the CandlestickDataPoint is how it sizes the body. CandlestickDataPoint has a method called UpdateBody() which will resize the body.


To make the CandlestickSeries “work”, we need to override CreateDataPoint, PrepareDataPoint, and UpdateDataPoint.

protected override DataPoint CreateDataPoint()
   return new CandlestickDataPoint();

CreateDataPoint adds an object to the series host by creating a corresponding data point for it.

protected override void PrepareDataPoint(DataPoint dataPoint, object dataContext)
   base.PrepareDataPoint(dataPoint, dataContext);
   CandlestickDataPoint candlestickDataPoint = (CandlestickDataPoint)dataPoint;
   candlestickDataPoint.SetBinding(CandlestickDataPoint.OpenProperty, OpenValueBinding);
   candlestickDataPoint.SetBinding(CandlestickDataPoint.CloseProperty, CloseValueBinding);
   candlestickDataPoint.SetBinding(CandlestickDataPoint.HighProperty, HighValueBinding);
   candlestickDataPoint.SetBinding(CandlestickDataPoint.LowProperty, LowValueBinding);

PrepareDataPoint prepares a data point by extracting and binding it to a data context object.

protected override void UpdateDataPoint(DataPoint dataPoint)
   CandlestickDataPoint candlestickDataPoint = (CandlestickDataPoint)dataPoint;
   double PlotAreaHeight = 
   double dataPointX = 
   double highPointY = 
   double lowPointY = 
   double openPointY = 
   double closePointY = 

   if (ValueHelper.CanGraph(dataPointX))
      dataPoint.Height = Math.Abs(highPointY - lowPointY);
      dataPoint.Width = 5.0;
      if (dataPoint.ActualWidth == 0.0 || dataPoint.ActualHeight == 0.0)

         Math.Round(dataPointX - (dataPoint.ActualWidth / 2)));
         Math.Round(PlotAreaHeight - highPointY));

UpdateDataPoint updates the visual representation of a single data point in the plot area.

And that is it…


<charting:Chart Title="Typical Use">


         ItemsSource="{Binding Microsoft, Source={StaticResource FinancialData}}"

         IndependentValueBinding="{Binding Date}"

         DependentValueBinding="{Binding High}"

         OpenValueBinding="{Binding Open}"

         CloseValueBinding="{Binding Close}"

         LowValueBinding="{Binding Low}"

         HighValueBinding="{Binding High}"/>

Please also visit my blog for more information...


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


About the Author

South Africa South Africa
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionProblems importiing with VS2013 Pin
25-Feb-15 23:40
member25-Feb-15 23:40 
QuestionForked for WPF 4.0 Pin
jogibear998829-Apr-14 11:56
memberjogibear998829-Apr-14 11:56 
QuestionI wish it worked with WPF :( Pin
Xavier John17-Sep-11 9:56
memberXavier John17-Sep-11 9:56 
QuestionHow can I find the source code of this article? Pin
Member 250407611-Jan-11 2:40
memberMember 250407611-Jan-11 2:40 
AnswerRe: How can I find the source code of this article? Pin
thavvarao9-Sep-11 6:06
memberthavvarao9-Sep-11 6:06 
GeneralMy vote of 5 Pin
Henrique Clausing30-Nov-10 0:12
memberHenrique Clausing30-Nov-10 0:12 
GeneralCustomizing style template Pin
Jon Burchel13-Nov-10 18:11
memberJon Burchel13-Nov-10 18:11 
GeneralRe: Customizing style template Pin
Jon Burchel13-Nov-10 19:26
memberJon Burchel13-Nov-10 19:26 
QuestionDataPointStyle Property Pin
Member 18713621-Aug-10 20:26
memberMember 18713621-Aug-10 20:26 
AnswerRe: DataPointStyle Property Pin
Member 187136210-Aug-10 1:37
memberMember 187136210-Aug-10 1:37 
GeneralRe: DataPointStyle Property Pin
Member 187136213-Aug-10 1:28
memberMember 187136213-Aug-10 1:28 
QuestionWPF Toolkit equivalent? Pin
tbgox24-May-10 9:31
membertbgox24-May-10 9:31 
AnswerRe: WPF Toolkit equivalent? [modified] Pin
JowenMei17-Jun-10 22:40
memberJowenMei17-Jun-10 22:40 
Generalabout my new "how to create stock chart" Pin
chuncn14-May-10 20:05
memberchuncn14-May-10 20:05 
GeneralRe: about my new "how to create stock chart" Pin
Member 18713622-Aug-10 19:00
memberMember 18713622-Aug-10 19:00 
GeneralPlease give an opinion on developing an open source market charting and trade simulation program Pin
John Pretorius30-Apr-10 2:06
memberJohn Pretorius30-Apr-10 2:06 
GeneralHelp me setting point by point instead of provide the observablecollection Pin
Camilo Vergara M.1-Jun-09 4:52
memberCamilo Vergara M.1-Jun-09 4:52 
GeneralOHLC Pin
Cengiz Ilerler27-Mar-09 19:00
memberCengiz Ilerler27-Mar-09 19:00 
GeneralCan't compile the project Pin
Tawani Anyangwe20-Feb-09 2:18
memberTawani Anyangwe20-Feb-09 2:18 
GeneralRe: Can't compile the project Pin
rudigrobler23-Feb-09 19:17
memberrudigrobler23-Feb-09 19:17 
GeneralRe: Can't compile the project Pin
thavvarao9-Sep-11 6:04
memberthavvarao9-Sep-11 6:04 
GeneralVery nice ... Pin
Colin Eberhardt16-Feb-09 23:19
memberColin Eberhardt16-Feb-09 23:19 
GeneralRe: Very nice ... Pin
rudigrobler16-Feb-09 23:27
memberrudigrobler16-Feb-09 23:27 

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 | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180920.1 | Last Updated 17 Feb 2009
Article Copyright 2009 by rudigrobler
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid