Candlestick, Candlestick Chart, charts, components, Silverlight, WPF, WP7

Visiblox Charts supports candlestick charts.

Tooltips have been enabled to show more detailed information when hovering over a point.

Zooming has been enabled - click and drag with the mouse on the plot area or use the mouse wheel to zoom, double click to unzoom.

Note that this example uses data from an external data source not included in the code snippets - download the examples source code in full to view the data.

XAML + CODE +

XAML

^ Back To Top

<UserControl x:Class="Visiblox.Charts.Examples.CandlestickChart.CandlestickChartExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:charts="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts"
    xmlns:local="clr-namespace:Visiblox.Charts.Examples.CandlestickChart"
    mc:Ignorable="d">

    <UserControl.Resources>
        <Style x:Key="NoBorder" TargetType="Border">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Black" />
        </Style>

        <local:YValuesConverter x:Key="YValuesConverter" />
        <local:DateFormatConverter x:Key="DateFormatConverter" />

        <!-- define Tooltip template to use on bars -->
        <ControlTemplate x:Key="CustomTooltipTemplate">
            <Border BorderBrush="Black" BorderThickness="1" Margin="15,0,0,0" Background="White">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Row="0" Text="Date: "/>
                    <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding X, Converter={StaticResource DateFormatConverter}}" />
                    <TextBlock Grid.Row="1" Text="High: " />
                    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Converter={StaticResource YValuesConverter}, ConverterParameter=High}" />
                    <TextBlock Grid.Row="2" Text="Low: " />
                    <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Converter={StaticResource YValuesConverter}, ConverterParameter=Low}" />
                    <TextBlock Grid.Row="3" Text="Open: " />
                    <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding Converter={StaticResource YValuesConverter}, ConverterParameter=Open}" />
                    <TextBlock Grid.Row="4" Text="Close: " />
                    <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding Converter={StaticResource YValuesConverter}, ConverterParameter=Close}" />
                </Grid>
            </Border>
        </ControlTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <!-- Define the chart, add zoom and a series with type CandleStickSeries -->
        <!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
        <charts:Chart Width="600" Height="350" Name="chart" PlotAreaBorderStyle="{StaticResource NoBorder}" 
                      LegendVisibility="Collapsed" Title="MSFT Share Price (29th Oct - 10th Dec 2009)" HorizontalAlignment="Center">
            
            <charts:Chart.Series>
                <charts:CandlestickSeries ToolTipEnabled="True" ToolTipTemplate="{StaticResource CustomTooltipTemplate}" />
            </charts:Chart.Series>
            <!-- Add zooming to the charts -->
            <charts:Chart.Behaviour>
                <charts:ZoomBehaviour />
            </charts:Chart.Behaviour>

            <charts:Chart.YAxis>
                <!-- Format String propogates through to crosshair text display-->
                <charts:LinearAxis LabelFormatString="N2" ShowMinorTicks="False" ShowMajorGridlines="True" MajorTickInterval="0.5" />
            </charts:Chart.YAxis>

            <charts:Chart.XAxis>
                <charts:DateTimeAxis ShowMinorTicks="False" ShowMajorGridlines="False" LabelFormatString="dd MMM" />
            </charts:Chart.XAxis>
        </charts:Chart>
    </Grid>
</UserControl>

^ Back To Top

Code

^ Back To Top

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Windows.Controls;
using System.Windows.Data;

namespace Visiblox.Charts.Examples.CandlestickChart
{
    /// <summary>
    /// An example of a candlestick data series
    /// </summary>
    public partial class CandlestickChartExample : UserControl
    {
        public CandlestickChartExample()
        {
            InitializeComponent();

            // Set the data source of the candlestick series
            chart.Series.First().DataSeries = GenerateData(30);

            //subscribe to X Axis property changed events to handle custom event on zoom level change
            chart.XAxis.PropertyChanged += HandleZoom;
        }

        /// <summary>
        /// Creates a set of MSFT example data
        /// Static as this function is used in multiple examples
        /// </summary>
        public static IDataSeries GenerateData(int numberOfDataPoints)
        {
            var series = new DataSeries<DateTime, double>();

            using (StreamReader reader = new StreamReader(ExampleHelpers.GetApplicationResourceStream("CandlestickChart/Data/MSFT.csv").Stream))
            {
                //First line is header information, so skip before reading data
                reader.ReadLine();

                while (reader.Peek() >= 0 && series.Count < numberOfDataPoints)
                {
                    string line = reader.ReadLine();
                    string[] values = line.Split(',');

                    DateTime date = DateTime.Parse(values[0]);
                    double open = double.Parse(values[1]);
                    double high = double.Parse(values[2]);
                    double low = double.Parse(values[3]);
                    double close = double.Parse(values[4]);

                    Dictionary<object, double> data = new Dictionary<object, double>()
                {
                    {CandlestickSeries.Open, open},
                    {CandlestickSeries.High, high},
                    {CandlestickSeries.Low, low},
                    {CandlestickSeries.Close, close},
                };

                    series.Add(new MultiValuedDataPoint<DateTime, double>(date, data));
                }
            }

            return series;
        }


        /// <summary>
        /// Set different axis ticker interval types depending on zoom level
        /// </summary>
        void HandleZoom(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Zoom")
            {
                var xAxis = chart.XAxis as DateTimeAxis;

                //if X axis zoomed in far enough (1/4 of original size), display axis interval in days or weeks
                xAxis.MajorTickIntervalType = xAxis.Zoom.Scale < 0.25 ? DateTimeAxisIntervalSpan.Days : DateTimeAxisIntervalSpan.Weeks;
            }
        }
    }

    #region Converters

    /// <summary>
    /// Convert decimal value to 2 decimal places for value shown by tooltip
    /// </summary>
    public class YValuesConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            IDataPoint dataPoint = value as IDataPoint;

            if (dataPoint != null)
                return ((double)dataPoint[parameter]).ToString("N2");

            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    /// <summary>
    /// Convert a DateTime to shorter date format
    /// </summary>
    public class DateFormatConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            //convert a DateTime to DD/MM/YY format
            if (value != null && value is DateTime)
            {
                DateTime dateTime = (DateTime)value;
                return dateTime.ToString("dd MMMM");
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    #endregion Converters
}

^ Back To Top

Real Charting Power...

View Features and Try for Free

Previous Example (Stacked Column)Next Example (OHLC)

Candlestick Chart | Visiblox Gallery

XAML

Code

Chart Types

Line And Area Charts

Bar And Column Charts

Financial Charts

Other Charts

Developer Features

High Performance

Customised Look And Feel

Application Development

Other Features