wpf-6886-controls-and-libraries-charts-suite-chart-control-examples-2d-chart-types-how-to-create-a-2d-stock-chart.md
This example shows how to create a 2D Stock Chart.
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.
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.
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>
using System;
using System.Collections.ObjectModel;
using System.Windows;
namespace Stock2DChart {
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),
};
}
}
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;
}
}
}
Imports System
Imports System.Collections.ObjectModel
Imports System.Windows
Namespace Stock2DChart
Partial Public Class Window1
Inherits Window
Public Sub New()
InitializeComponent()
End Sub
End Class
Public Class ChartViewModel
Private privateData As ObservableCollection(Of DataPoint)
Public Property Data() As ObservableCollection(Of DataPoint)
Get
Return privateData
End Get
Private Set(ByVal value As ObservableCollection(Of DataPoint))
privateData = value
End Set
End Property
Public Sub New()
Data = New ObservableCollection(Of DataPoint) From {
New DataPoint(New Date(2019,1,1), 25, 28, 24, 27),
New DataPoint(New Date(2019,1,2), 27, 35, 26, 32),
New DataPoint(New Date(2019,1,3), 32, 35, 27, 29),
New DataPoint(New Date(2019,1,4), 29, 37, 29, 36),
New DataPoint(New Date(2019,1,5), 36, 37, 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)
Me.Date = arg
Me.Open = open
Me.High = high
Me.Low = low
Me.Close = close
End Sub
End Class
End Namespace