Skip to main content

How to: Create a 2D Stock Chart

  • 3 minutes to read

This example shows how to create a 2D Stock 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 x:Class="Stock2DChart.Window1" 
        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:Stock2DChart"
        Title="Window1" 
        Height="350" Width="620">
    <Window.DataContext>
        <local:ChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl Name="chartControl1">
            <dxc:XYDiagram2D>
                <dxc:StockSeries2D ArgumentScaleType="DateTime" 
                                   DataSource="{Binding Data}" 
                                   ArgumentDataMember="Date"
                                   OpenValueDataMember="Open"
                                   HighValueDataMember="High"
                                   LowValueDataMember="Low"
                                   CloseValueDataMember="Close"
                                   LabelsVisibility="True">
                    <dxc:StockSeries2D.Label>
                        <dxc:SeriesLabel TextPattern="{}{HV}"/>
                    </dxc:StockSeries2D.Label>
                    <dxc:StockSeries2D.Model>
                        <dxc:FlatStock2DModel/>
                    </dxc:StockSeries2D.Model>
                    <dxc:StockSeries2D.ReductionOptions>
                        <dxc:ReductionStockOptions Level="CloseValue" 
                                                   ColorMode="OpenToCloseValue"/>
                    </dxc:StockSeries2D.ReductionOptions>
                </dxc:StockSeries2D>
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D>
                        <dxc:AxisX2D.Label>
                            <dxc:AxisLabel TextPattern="{}{A:MMM d}"/>
                        </dxc:AxisX2D.Label>
                        <dxc:AxisX2D.DateTimeScaleOptions>
                            <dxc:ManualDateTimeScaleOptions AutoGrid="False" 
                                                            GridSpacing="1"/>
                        </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>