[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Collapse]Chart Control
   [Expand]Getting Started
   [Expand]Charting Basics
   [Expand]Series Views
   [Expand]Chart Elements
   [Expand]Providing Data
   [Collapse]Data Representation
     Filter Series Data
     Sorting Data
     Data Aggregation
     Calculating Summaries
    [Collapse]Financial Charting
      How to: Create a Financial Chart
     Using The Top-N Feature
     Work Time and Workday Configuration
     Empty Points
     Histogram
   [Expand]Appearance Customization
   [Expand]End-User Features
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]Examples
   [Expand]Additional Resources
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Create a Financial Chart

This tutorial explains how to create a financial chart at runtime.

Expanded Add a Chart to a Project

  • Create a new WinForms project or open an existing project.

  • Add a ChartControl (see ChartControl) component to the form as shown in Lesson 1.

  • Set the form's skin to "Office 2019 Black".

Expanded Specify the Chart's Data Source and Bind a Series to Data

The data structure looks as follows:

Refer to Providing Data for more information about how to populate a chart with data.

Expanded Enable Navigation

To allow users to scroll and zoom a chart, enable the following options:

Note

Use the XYDiagram2D.EnableAxisYZooming and XYDiagram2D.EnableAxisYScrolling properties to enable navigation for y-axes.

Expanded Customize Series View

A view defines series appearance settings. This tutorial uses the CandleStickSeriesView (see CandleStickSeriesView) that visualizes financial data points as candlesticks:

Related API

Member Description
CandleStickSeriesView (see CandleStickSeriesView) Represents a series view of the Candle Stick type.
ReductionStockOptions.ColorMode Gets or sets the mode used to color the financial series points.
CandleStickReductionOptions.FillMode Gets or sets a value specifying how the Candle Stick Series View points will be filled.
ReductionStockOptions.Color Gets or sets the color of the price reduction.
SeriesViewBase.Color Gets or sets the color of the series.

Expanded Apply Technical Indicators

Indicators are calculated based on series data and allow you to predict changes in stock prices. This section describes how to draw a Trend Line through the data set's first and last points. You also plot the Rate of Change indicator used to display how the closing price changes in relation to its previous value as a percentage.

Related API

Member Description
TrendLine (see TrendLine) Represents an individual Trend Line.
RateOfChange (see RateOfChange) A Rate of Change indicator.
XYDiagram2DSeriesViewBase.Indicators Provides access to the collection of Indicators that belong to the current series.
RateOfChange.ValueLevel Gets or sets the value specifying which series point value should be used to calculate the indicator.
Indicator.CrosshairEnabled Gets or sets the value that specifies whether to enable the Crosshair Cursor for the indicator.
Indicator.CrosshairContentShowMode Gets or sets the element that displays the indicator's Crosshair content.
Indicator.CrosshairLabelPattern Gets or sets the pattern to format the text that the Crosshair Cursor shows for the specified indicator's point.
Indicator.LegendText Gets or set the text that identifies an indicator within the chart legend.
Indicator.ShowInLegend Specifies whether the indicator is represented in the chart's Legend.

Expanded Specify Pane Options

This section explains how to add a separate pane for the Rate of Change indicator and change panes' sizes.

Related API

Member Description
XYDiagramPane (see XYDiagramPane) Represents an XY-diagram's additional pane.
GridLayoutOptions.RowSpan Gets or sets the number of grid layout rows that the pane occupies.
XYDiagramPaneBase.ScrollBarOptions Gets the specific settings of scroll bars displayed within the pane when the chart is being zoomed or scrolled.
XYDiagram2D.Panes Provides access to the diagram's collection of Panes.
SeparatePaneIndicator.Pane Gets or sets the pane, used to plot the separate pane indicator on an XYDiagram.

Expanded Configure Axis Options

This section shows how to:

Related API

Member Description
SecondaryAxisY (see SecondaryAxisY) Represents the secondary Y-Axis within a chart control in 2D series, except for the Swift Plot.
WholeRange.AlwaysShowZeroLevel Gets or sets the value that indicates whether to show an axis zero level.
Axis2D.Alignment Specifies the position of an axis relative to another primary axis.
GridLines.Visible Specifies whether the grid lines are visible.
XYDiagram.SecondaryAxesY Provides access to a collection of secondary Y-axes for a given XYDiagram.
SeparatePaneIndicator.AxisY Gets or sets the Y-axis that is used to plot the current indicator on a XYDiagram.
XYDiagram2D.DependentAxesYRange Gets or sets whether the visual range of all Y-axes (axes of values) should be calculated only by values of points contained in the visual range of the X-axis (axis of arguments).
AxisBase.Interlaced Gets or sets whether interlacing is applied to the axis.
XYDiagram.AxisX Gets the X-axis.
Range.SetMinMaxValues Sets both minimum and maximum values of an axis range.
Axis2D.SetVisibilityInPane Specifies Panes in which an axis should be visible.
DateTimeScaleOptions.WorkdaysOnly Specifies whether holidays and non-working days should be excluded from the axis scale.
AxisLabel.TextPattern Gets or sets a string that formats text for the auto-generated x- or y-axis labels.

Expanded Customize Crosshair Options

The Crosshair Cursor allows you to track series and indicator series point values. The CrosshairOptions (see CrosshairOptions) stores settings that define the Crosshair Cursor's appearance and behavior.

Related API

Member Description
CrosshairOptions.ShowOnlyInFocusedPane Gets or sets a value that specifies whether to show a crosshair cursor in a focused pane only.
CrosshairOptions.ShowValueLine Specifies whether to show a value line of a series point indicated by a crosshair cursor on a diagram.
CrosshairOptions.CrosshairLabelMode Gets or sets the element that displays the Crosshair's content.

Expanded Configure Legend Options

This step shows how to add a second legend, assign it to an indicator, and adjust the legend's position.

Related API

Member Description
ChartControl.Legend Provides access to the chart control's Legend.
Legend (see Legend) Represents a chart's Legend.
Legend.AlignmentHorizontal Gets or sets the legend's horizontal alignment within the chart control.
Legend.AlignmentVertical Gets or sets the legend's vertical alignment within the chart control.
Legend.DockTarget Specifies the element (chart or pane), to which the legend is docked.
Legend.MaxCrosshairContentWidth Gets or sets the maximum width for the Crosshair's content in the legend.
ChartControl.Legends Provides access to the chart control's Legend.
Indicator.Legend Gets or sets a legend displaying an indicator legend item.

Expanded Results

The resulting code is listed below:

Is this topic helpful?​​​​​​​