How to: Create a 2D Stock Chart
The following example demonstrates how to create a 2D Stock chart. To do this, it is necessary to assign the ChartControl.Diagram property to XYDiagram2D, and then add a StockSeries2D 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-stock-chart-e1684.
<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"
Title="Window1"
Height="350" Width="620">
<Grid>
<dxc:ChartControl Name="chartControl1">
<dxc:XYDiagram2D>
<dxc:StockSeries2D ArgumentScaleType="DateTime" LabelsVisibility="True">
<dxc:SeriesPoint Argument="1/1/2017"
dxc:FinancialSeries2D.CloseValue="27"
dxc:FinancialSeries2D.HighValue="28"
dxc:FinancialSeries2D.LowValue="24"
dxc:FinancialSeries2D.OpenValue="25"/>
<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" />
<dxc:StockSeries2D.Label>
<dxc:SeriesLabel TextPattern="{}{HV}"/>
</dxc:StockSeries2D.Label>
<!--region #Model-->
<dxc:StockSeries2D.Model>
<dxc:ArrowsStock2DModel/>
</dxc:StockSeries2D.Model>
<!--endregion #Model-->
<!--region #ReductionOptions-->
<dxc:StockSeries2D.ReductionOptions>
<dxc:ReductionStockOptions Level="CloseValue"
ColorMode="OpenToCloseValue"/>
</dxc:StockSeries2D.ReductionOptions>
<!--endregion #ReductionOptions-->
</dxc:StockSeries2D>
<dxc:XYDiagram2D.AxisX>
<dxc:AxisX2D>
<dxc:AxisX2D.Label>
<dxc:AxisLabel TextPattern="{}{A:MMMM d}"/>
</dxc:AxisX2D.Label>
</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>