How to: Create a 2D Candle Stick Chart

• Jun 07, 2019

The following example demonstrates how to create a 2D Candle Stick chart. To do this, it is necessary to assign the ChartControl.Diagram property to XYDiagram2D, and then add a CandleStickSeries2D object with points to the diagram’s Diagram.Series collection.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-2d-candle-stick-chart-e1685.

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" 
        x:Class="CandleStick2DChart.Window1" 
        Title="Window1" 
        Height="350" Width="620">
    <Grid>
        <dxc:ChartControl Name="chartControl1">
            <dxc:XYDiagram2D>
                <dxc:CandleStickSeries2D ArgumentScaleType="DateTime" 
                                         LabelsVisibility="True">
                    <!--region #FinancialSeriesPoint-->
                    <dxc:SeriesPoint Argument="1/1/2017" 
                                     dxc:FinancialSeries2D.CloseValue="27" 
                                     dxc:FinancialSeries2D.HighValue="28" 
                                     dxc:FinancialSeries2D.LowValue="24" 
                                     dxc:FinancialSeries2D.OpenValue="25"/>
                    <!--endregion #FinancialSeriesPoint-->
                    <dxc:SeriesPoint Argument="1/2/2017" 
                                     dxc:FinancialSeries2D.CloseValue="32" 
                                     dxc:FinancialSeries2D.HighValue="35" 
                                     dxc:FinancialSeries2D.LowValue="26" 
                                     dxc:FinancialSeries2D.OpenValue="27"/>
                    <dxc:SeriesPoint Argument="1/3/2017" 
                                     dxc:FinancialSeries2D.CloseValue="29" 
                                     dxc:FinancialSeries2D.HighValue="35" 
                                     dxc:FinancialSeries2D.LowValue="27" 
                                     dxc:FinancialSeries2D.OpenValue="32"/>
                    <dxc:SeriesPoint Argument="1/4/2017" 
                                     dxc:FinancialSeries2D.CloseValue="36" 
                                     dxc:FinancialSeries2D.HighValue="37" 
                                     dxc:FinancialSeries2D.LowValue="29" 
                                     dxc:FinancialSeries2D.OpenValue="29"/>
                    <dxc:SeriesPoint Argument="1/5/2017" 
                                     dxc:FinancialSeries2D.CloseValue="33" 
                                     dxc:FinancialSeries2D.HighValue="37" 
                                     dxc:FinancialSeries2D.LowValue="32" 
                                     dxc:FinancialSeries2D.OpenValue="36"/>
                    <!--region #ValueToDisplay-->
                    <dxc:CandleStickSeries2D.Label>
                        <dxc:SeriesLabel TextPattern="{}{HV}"/>
                    </dxc:CandleStickSeries2D.Label>
                    <!--endregion #ValueToDisplay-->
                    <!--region #ReductionOptions-->
                    <dxc:CandleStickSeries2D.ReductionOptions>
                        <dxc:ReductionStockOptions ColorMode="OpenToCloseValue" 
                                                   dxc:CandleStickSeries2D.FillMode="FilledOnReduction"/>
                    </dxc:CandleStickSeries2D.ReductionOptions>
                    <!--endregion #ReductionOptions-->
                    <!--region #Model-->
                    <dxc:CandleStickSeries2D.Model>
                        <dxc:ThinCandleStick2DModel />
                    </dxc:CandleStickSeries2D.Model>
                    <!--endregion #Model-->
                </dxc:CandleStickSeries2D>
                <!--region #AxisX-->
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D>
                        <dxc:AxisX2D.Label>
                            <dxc:AxisLabel TextPattern="{}{A:MMMM d}"/>
                        </dxc:AxisX2D.Label>
                    </dxc:AxisX2D>
                </dxc:XYDiagram2D.AxisX>
                <!--endregion #AxisX-->
                <!--region #AxisY-->
                <dxc:XYDiagram2D.AxisY>
                    <dxc:AxisY2D>
                        <dxc:AxisY2D.WholeRange>
                            <dxc:Range dxc:AxisY2D.AlwaysShowZeroLevel="False" />
                        </dxc:AxisY2D.WholeRange>
                    </dxc:AxisY2D>
                </dxc:XYDiagram2D.AxisY>
                <!--endregion #AxisY-->
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>