WPF Elements: NEW Stock Charts!

We have just shipped two great new additions to our WPF Elements charting suite: Stock Series and Candlestick Series. These charts plot open-high-low-close values against the Y axis to display the activity in the stock market over time.

The Stock series (sometimes known as a stick series) displays a vertical line between the low and high values and places a tick mark to the left for the open value, and a tick mark to the right for the close value. Below is an example of our new stock series. Notice that data points that have a lower close value than the open value are styled with a different color.

Stock Chart

The candlestick series is similar to the stock series, but renders a box between the open and close tick marks. This colored box makes it easy to see the trends in the stock market. Below is a candlestick chart using the default style.

Candlestick Chart

To create one of these stock charts, all you need to do is add either a StockSeries or CandlestickSeries to a Chart control, and then fill its ItemsSource with instances of the StockDataPoint model class that we provide. The StockDataPoint constructor takes in the DateTime, open, high, low and close values. The stock series will take care of using the appropriate values to create the visuals. Since stock charts are plotted along a date-time axis by default, you will also want to set the LabelFormat of the X axis so that the date-times are displayed how you like. Here is a simple example of creating a stock chart. The ItemsSource is binding to a Data property in code-behind which is a collection of StockDataPoint objects.

<ms:Chart Title="Stock prices">
  <ms:StockSeries ItemsSource="{Binding Data}" Title="Year 2012" />
  <ms:Chart.XAxis>
    <ms:ChartAxis LabelFormat="{}{0:dd MMM}" LabelRotation="50" />
  </ms:Chart.XAxis>
</ms:Chart>

Using your own data model

The StockDataPoint model class is provided as a convenience to get stock charts up and running quickly. But you don’t have to use this model class to create stock charts, which means that you can use your own model if you need to. Here are some scenarios where you may want to use your own data point model:

1. You already have a model ready to use that follows your company naming conventions or contains additional data values.
2. You want the chart to be plotted against a numerical X axis rather than a date-time axis.
3. You’d prefer to use an immutable data model or a struct.

To use your own data point model, all you need to do is tell the stock series which properties to use for the open, high, low, close and x values. Here is a simple implementation of a custom data point model along with how to tell a candlestick series how to interpret it. Note that it is still important to set the YBinding property just like with other cartesian series.

public class MyStockDataPoint
{
  public MyStockDataPoint(double x, double open, double high, double low, double close)
  {
    X = x;
    OpenValue = open;
    HighValue = high;
    LowValue = low;
    CloseValue = close;
  }
 
  public double X { get; private set; }
 
  public double OpenValue { get; private set; }
 
  public double HighValue { get; private set; }
 
  public double LowValue { get; private set; }
 
  public double CloseValue { get; private set; }
}
<ms:Chart Title="Stock prices">
  <ms:CandlestickSeries ItemsSource="{Binding Data}" Title="Year 2012"
                        XBinding="{Binding X}" YBinding="{Binding LowValue}"
                        OpenBinding="{Binding OpenValue}" HighBinding="{Binding HighValue}"
                        LowBinding="{Binding LowValue}" CloseBinding="{Binding CloseValue}" />
</ms:Chart>

Custom styling options

The most basic styling option available for these stock series is changing the positive and negative brushes. The usual SeriesBrush property is used for coloring data points that have an increase from the open value to the close value. To change the color of data points that have a negative open-to-close flow, you can use the NegativeSeriesBrush property. Other styling that you may want to do is changing the thickness of the paths or changing the fill color of the candle sticks. These effects can be done by setting the PositiveStyle and NegativeStyle properties as seen here:

Custom Candlestick Style

<Style x:Key="ThinPositiveCandlestickStyle" TargetType="Path">
  <Setter Property="StrokeThickness" Value="1" />
  <Setter Property="Stroke" Value="Black" />
  <Setter Property="Fill" Value="#98C723" />
</Style>
 
<Style x:Key="ThinNegativeCandlestickStyle" TargetType="Path">
  <Setter Property="StrokeThickness" Value="1" />
  <Setter Property="Stroke" Value="Black" />
  <Setter Property="Fill" Value="#AA2B1E" />
</Style>
 
<ms:Chart Title="Stock prices">
  <ms:CandleStickSeries ItemsSource="{Binding Data}"
                        PositiveStyle="{StaticResource ThinPositiveCandlestickStyle}"
                        NegativeStyle="{StaticResource ThinNegativeCandlestickStyle}" />
  <ms:Chart.XAxis>
    <ms:ChartAxis LabelFormat="{}{0:dd MMM}" LabelRotation="50" />
  </ms:Chart.XAxis>
</ms:Chart>

Get your stock charts now

These new stock charts are available for you to download and enjoy right now! Get the latest nightly build from here if you have the trial version, or go to your account page if you’re already a customer.

If you have any questions about these new stock charts or have any feature requests then we’d really love to hear from you in the forum. Remember that our whole charting suite is just part of our entire WPF control suite which ships with 50+ controls including a high performance data grid.

Tagged as WPF Elements

One Response to “WPF Elements: NEW Stock Charts!”

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top