How to: Create a 2D Stock Chart

• Jun 07, 2019
• 3 minutes to read

This example shows how to create a 2D Stock Chart.

1. Create a ChartControl and specify its ChartControl.Diagram property to a SimpleDiagram2D object.

   Note

   Note that the ChartControl.Diagram is a content property. You can declare a diagram in XAML directly 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

   Note that the Diagram.Series is a content property. You can declare series in XAML directly 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:

   • Series.DataSource - Specifies the series’s data source.
   • Series.ArgumentDataMember - Defines the data member that provides the series’s arguments.
   • FinancialSeries2D.OpenValueDataMember - Specifies the data member that provides data for Open point values.
   • FinancialSeries2D.HighValueDataMember - Defines the data member that provides data for High point values.
   • FinancialSeries2D.LowValueDataMember - Specifies the data member that provides data for Low point values.
   • FinancialSeries2D.CloseValueDataMember - Specifies the data member that provides data for Close point values.

Note

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

Window1.xaml

<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>
                    <!--region #Model-->
                    <dxc:StockSeries2D.Model>
                        <dxc:FlatStock2DModel/>
                    </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: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>

Window1.xaml.cs

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace Stock2DChart {
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    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;
        }
    }
}

Window1.xaml.vb

Imports System
Imports System.Collections.ObjectModel
Imports System.Windows

Namespace Stock2DChart
    ''' <summary>
    ''' Interaction logic for Window1.xaml
    ''' </summary>
    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