How to: Create a 2D Candle Stick Chart

• Jun 07, 2019
• 4 minutes to read

The following example demonstrates how to create a 2D Candle Stick chart.

1. Create a ChartControl and set its ChartControl.Diagram property to a XYDiagram2D object. Note that the ChartControl.Diagram is a content property. You can declare a diagram in XAML after a chart control’s declaration without wrapping it in opening and closing ChartControl.Diagram tags.

2. Add a StockSeries2D object to the Diagram.Series collection. Note that the Diagram.Series is a content property. You can declare series in XAML after a diagram’s declaration without wrapping them in opening and closing Diagram.Series tags.

3. Use the following properties to bind the series to data:

   • Series.DataSource - Specifies the series’s data source.
   • Series.ArgumentDataMember - Defines the data member that provides the series’s arguments.
   • FinancialSeries2D.OpenValueDataMember - Specifies the data member that contains data for Open point values.
   • FinancialSeries2D.HighValueDataMember - Defines the data member that contains data for High point values.
   • FinancialSeries2D.LowValueDataMember - Specifies the data member that contains data for Low point values.
   • FinancialSeries2D.CloseValueDataMember - Specifies the data member that contains data for Close point values.

Window1.xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        xmlns:local="clr-namespace:CandleStick2DChart"
        x:Class="CandleStick2DChart.Window1" 
        Title="Window1" 
        Height="350" Width="620">
    <Grid>
        <dxc:ChartControl Name="chartControl1">
            <dxc:ChartControl.DataContext>
                <local:ChartViewModel/>
            </dxc:ChartControl.DataContext>
            <dxc:XYDiagram2D>
                <dxc:CandleStickSeries2D ArgumentScaleType="DateTime"
                                         DataSource="{Binding Data}"
                                         ArgumentDataMember="Date"
                                         OpenValueDataMember="Open"
                                         HighValueDataMember="High"
                                         LowValueDataMember="Low"
                                         CloseValueDataMember="Close"
                                         LabelsVisibility="True" 
                                         Brush="Green">
                    <dxc:CandleStickSeries2D.Label>
                        <dxc:SeriesLabel TextPattern="{}{HV}"/>
                    </dxc:CandleStickSeries2D.Label>
                    <dxc:CandleStickSeries2D.ReductionOptions>
                        <dxc:ReductionStockOptions ColorMode="OpenToCloseValue" 
                                                   dxc:CandleStickSeries2D.FillMode="FilledOnReduction"    
                                                   Level="CloseValue"
                                                   Brush="Red"/>
                    </dxc:CandleStickSeries2D.ReductionOptions>
                    <dxc:CandleStickSeries2D.Model>
                        <dxc:ThinCandleStick2DModel />
                    </dxc:CandleStickSeries2D.Model>
                </dxc:CandleStickSeries2D>       
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D>
                        <dxc:AxisX2D.Label>
                            <dxc:AxisLabel TextPattern="{}{A:MMMM d}"/>
                        </dxc:AxisX2D.Label>
                        <dxc:AxisX2D.DateTimeScaleOptions>
                            <dxc:AutomaticDateTimeScaleOptions SkipRangesWithoutPoints="True"/>
                        </dxc:AxisX2D.DateTimeScaleOptions>
                    </dxc:AxisX2D>
                </dxc:XYDiagram2D.AxisX>
                <dxc:XYDiagram2D.AxisY>
                    <dxc:AxisY2D>
                        <dxc:AxisY2D.WholeRange>
                            <dxc:Range dxc:AxisY2D.AlwaysShowZeroLevel="False"/>
                        </dxc:AxisY2D.WholeRange>
                    </dxc:AxisY2D>
                </dxc:XYDiagram2D.AxisY>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>

Window1.xaml.cs

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace CandleStick2DChart {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
    public class ChartViewModel {
        public ObservableCollection<DataPoint> Data { get; private set; }
        public ChartViewModel() {
            Data = new ObservableCollection<DataPoint> {
                new DataPoint(new DateTime(2019,1,1), 25, 28, 24, 27),
                new DataPoint(new DateTime(2019,1,2), 27, 35, 26, 32),
                new DataPoint(new DateTime(2019,1,3), 32, 35, 27, 29),
                new DataPoint(new DateTime(2019,1,4), 29, 37, 29, 36),
                new DataPoint(new DateTime(2019,1,5), 36, 37, 32, 33),
                new DataPoint(new DateTime(2019,1,6), 36, 37, 33, 35),

                new DataPoint(new DateTime(2019,1,8), 31, 37, 30, 33),
                new DataPoint(new DateTime(2019,1,9), 32, 38, 29, 37),
                new DataPoint(new DateTime(2019,1,10), 34, 35, 32, 33),
            };
        }
    }
    public class DataPoint {
        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 DataPoint(DateTime arg, double open, double high, double low, double close) {
            this.Date = arg;
            this.Open = open;
            this.High = high;
            this.Low = low;
            this.Close = close;
        }
    }
}

Window1.xaml.vb

Imports System
Imports System.Collections.ObjectModel

Namespace CandleStick2DChart
    Public Partial Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class

    Public Class ChartViewModel
        Private _Data As System.Collections.ObjectModel.ObservableCollection(Of CandleStick2DChart.DataPoint)

        Public Property Data As ObservableCollection(Of DataPoint)
            Get
                Return _Data
            End Get
            Private Set(ByVal value As ObservableCollection(Of DataPoint))
                _Data = value
            End Set
        End Property

        Public Sub New()
            Data = New ObservableCollection(Of DataPoint) From {
                New DataPoint(New DateTime(2019, 1, 1), 25, 28, 24, 27),
                New DataPoint(New DateTime(2019, 1, 2), 27, 35, 26, 32),
                New DataPoint(New DateTime(2019, 1, 3), 32, 35, 27, 29),
                New DataPoint(New DateTime(2019, 1, 4), 29, 37, 29, 36),
                New DataPoint(New DateTime(2019, 1, 5), 36, 37, 32, 33),
                New DataPoint(New DateTime(2019, 1, 6), 36, 37, 33, 35),
                New DataPoint(New DateTime(2019, 1, 8), 31, 37, 30, 33),
                New DataPoint(New DateTime(2019, 1, 9), 32, 38, 29, 37),
                New DataPoint(New DateTime(2019, 1, 10), 34, 35, 32, 33)
            }
        End Sub
    End Class
    Public Class DataPoint
        Public Property [Date] As Date
        Public Property Open As Double
        Public Property High As Double
        Public Property Low As Double
        Public Property Close As Double

        Public Sub New(ByVal arg As Date, ByVal open As Double, ByVal high As Double, ByVal low As Double, ByVal close As Double)
            [Date] = arg
            Me.Open = open
            Me.High = high
            Me.Low = low
            Me.Close = close
        End Sub
    End Class
End Namespace