Skip to main content

How to: Create a 2D Candle Stick Chart

  • 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:

<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>