[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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
   [Collapse]Getting Started
     Lesson 1 - Create a Simple Unbound Chart
     Lesson 2 - Create a Chart using the Chart Designer
     Lesson 3 - Bind Chart Series to Data
     Lesson 4 - Use a Series Template for Auto-Created Series
   [Expand]Charting Basics
   [Expand]Series Views
   [Expand]Chart Elements
   [Expand]Providing Data
   [Expand]Data Representation
   [Expand]Appearance Customization
   [Expand]End-User Features
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]Additional Resources
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [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]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 1 - Create a Simple Unbound Chart

This example demonstrates how to construct a chart at design time within Visual Studio with manually created and populated series.

To create a simple unbound chart, do the following.

Expanded Create a Chart and Add Series to it

  1. Start MS Visual Studio 2012, 2013, 2015, 2017 or 2019, and create a new Windows Forms Application or open an existing one.
  2. From the DX.19.2: Data & Analytics toolbox tab, drop the ChartControl onto the form.

    Note that after you drop the Chart, the Chart Wizard may be invoked (if its "Display a wizard every time a new chart is added" option is enabled). In this example, we don't need to use the Wizard, so click Cancel to close its window.


    For the chart to occupy all of the available space on the form, click the chart's smart tag, and in its actions list, click Dock in Parent Container.


    Note that the DashboardDesigner control does not support .NET Framework 4.0 Client Profile. To learn how to target a version of the .NET Framework, see Framework targeting overview.

  3. To add a new series to the chart, click the chart's smart tag, and in its actions list, click the Series... link.

  4. Then, in the invoked Series Collection Editor, click Add....

  5. In the Choose Series View dialog, specify the view type of the series being created.

    Note that the view type of the first visible series in the chart's collection determines its diagram type.

    For example, choose the Bar series, for the chart to get the XY-type.


    The available view types are listed in 2D Series Views and 3D Series Views.

  6. XtraCharts automatically detects the data type of series arguments. This means that you don't need to specify the SeriesBase.ArgumentScaleType property before providing data for a chart, because it is set to Auto by default. Just make sure the default value of the SeriesBase.ValueScaleType property meets your requirements for some view types. Otherwise, select another value scale type (e.g., for the Bar series view).

    You can perform this in the Properties tab of the dialog.

  7. To manually add points to your series, switch back to the Points tab. Although, some series view types may require more than one value for each point's argument (e.g., in Bubble or Stock series), it's more typical for a point to have only an argument and value pair, which correspond to the point's X and Y coordinates along the appropriate Axes.

  8. In your chart, you can create as many different series as required. Moreover, you can combine series of different view types within the same chart, if these view types are compatible. For example, add a Spline series.

To apply the changes and quit the dialog, click Close. Now, your chart has two different series, populated with points.

The chart will look like the following image.

Expanded Customize the Chart

  1. Enable Data Point Markers

    Note that by default, data point markers are hidden. Let's display markers on a diagram.

    To do this, for Series 2, set the SplineSeriesView.MarkerVisibility property to true.

  2. Customize the Legend

    By default, the chart's Legend is shown in the top-right corner of the chart. To change the legend position, expand the ChartControl.Legend property, and set its Legend.AlignmentHorizontal property to Center, Legend.AlignmentVertical to TopOutside, and Legend.Direction to LeftToRight.

  3. Add a Constant Line

    To highlight a value across any axis, a Constant Line can be drawn through it. To do this, expand the ChartControl.Diagram property, and then its IXYDiagram2D.AxisY property in the Properties window. And click the ellipsis button for its Axis2D.ConstantLines property.

    Then, in the Constant Line Collection Editor, click Add to create a constant line, specify its ConstantLine.AxisValue property, and adjust its remaining options.

    The result is illustrated in the following image.

  4. Display Series in Different Panes

    You can show each series (or group of series) in a separate pane. To do this, select the Spline series on a diagram. Then, in the Properties grid, expand the SeriesBase.View property and invoke the drop-down menu for the XYDiagramSeriesViewBase.Pane property, and click New pane.

    The result is illustrated in the following image.

    In addition, you can customize the axes visibility in the Panes, and create secondary axes as well.

  5. Customize the Crosshair Cursor

    By default, a crosshair cursor is automatically displayed on a chart control at runtime. You can enable (disable) the crosshair cursor both at the level of a chart control using the ChartControl.CrosshairEnabled property, and at the level of a chart series via the SeriesBase.CrosshairEnabled property.

    To demonstrate the second approach, let's disable a crosshair label for the Bar series.

    To do this, invoke the Series Collection Editor via the chart's smart tag. Then, locate the SeriesBase.CrosshairEnabled property in the Series1's Properties tab and set it to false.

    Note that you can also access this property in the Properties grid.

    Run the application and make sure a crosshair label appears only for the Spline series.

    Let's show crosshair axis lines and crosshair axis labels on a chart.

    To accomplish this, locate the CrosshairOptions object in the Properties grid and set its CrosshairOptions.ShowValueLine, CrosshairOptions.ShowArgumentLabels and CrosshairOptions.ShowValueLabels properties to true, as shown below:

    Run the application to see the result.

Expanded See Also

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