Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Collapse]Getting Started
      Lesson 1 - Create a Simple Chart
      Lesson 2 - Create a Chart Using the Designer
      Lesson 3 - Bind Chart Series to Data
      Lesson 4 - Use a Series Template for Auto-Created Series
    [Expand]Fundamentals
    [Expand]Providing Data
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Expand]Visual Elements
    [Expand]Examples
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 1 - Create a Simple Chart

This lesson demonstrates how to create a simple chart with two Side-by-Side Bar series, populate it with data, and adjust its common settings.

Note

You can also create a chart using the Instant Layout Assistant. For more details, see the How to: Create a Chart Using the Instant Layout Assistant example.

To create a simple charting application, do the following.

Expanded Step 1. Create a New Project and Add a Chart Control

  • Run Microsoft Visual Studio 2010, 2012, 2013, 2015 or 2017.

  • Create a new WPF Application project.

  • Add the ChartControl object to your project. You can do this by dragging the ChartControl item from the DX.17.2: Data & Analytics Toolbox tab.

  • Right-click the ChartControl object and choose Layout | Reset All in the context menu. This will stretch the chart to fill the entire window.

After this action, your XAML appears as follows. If it does not, overwrite your code with the code below.

Note

You can add the ChartControl with the XYDiagram2D diagram type and the Side-by-Side Bar series, and add a Legend to the chart by overwriting your MainWindow.xaml file with this code, without dragging the ChartControl to the window.

If the auto-created XAML does not meet your requirements, you can leave the ChartControl object in XAML, as shown below, and create chart elements manually (for example, add another diagram type to the chart using the ChartControl.Diagram property).

However, in this case, you need to manually add references to the following libraries:

DevExpress.Data.v17.2, DevExpress.Xpf.Core.v17.2, DevExpress.Charts.v17.2.Core, DevExpress.Xpf.Charts.v17.2, DevExpress.Mvvm.v17.2, DevExpress.Xpf.Printing.v17.2 and DevExpress.Printing.v17.2.Core.

Note

Normally, references added to these assemblies are chosen from the Global Assembly Cache (GAC). However, if you prefer to copy them locally, or need to include them later into your product's installation, you can find copies in the following directory: C:\Program Files (x86)\DevExpress 17.2\Components\Bin\Framework\.

In this step, leave the auto-created XAML as is.

In the next step, you will add the second Side-by-Side Bar series to the chart and populate the series points with data.

Expanded Step 2. Provide Chart Data

You will need to fill the chart with data. Start by adding the second Side-by-Side Bar series to the auto-created Diagram2D diagram type.

  • Locate the Diagram.Series property and click the ellipsis button to invoke the Collection Editor: Series. In this editor, add the second BarSideBySideSeries2D by clicking the Add button.

  • For each series, locate the Series.Points property and add 4 SeriesPoint objects to them using the Add button.

  • For each series point, set the argument and value as follows.

    SeriesPoint

    Argument

    Value

    [0] A 1
    [1] B 2
    [2] C 3
    [3] D 4

  • Do the same for the second series with the following values.

    SeriesPoint

    Argument

    Value

    [0] A 4
    [1] B 3
    [2] C 2
    [3] D 1

After these actions are complete, you will get the following XAML.

Expanded Step 3. Customize the Chart

In the final step, you will learn how to customize the chart (adjust series-view-specific options, customize crosshair cursor options, etc.).

Adjust Series-view-specific Options

Next, you will make the chart appear 3D.

Add a Chart Title

  • To create a title for your chart, select it, and in the Properties grid, click the ellipsis button for the ChartControlBase.Titles property.

  • In the invoked collection editor, click Add and set the TitleBase.Content to "My Title".

Customize Crosshair Cursor Options

Crosshair cursor labels and a crosshair argument line are displayed on a chart by default. You can disable (enable) a crosshair cursor at the chart level (using the ChartControlBase.CrosshairEnabled property) and at the series level (using the XYSeries2D.CrosshairEnabled property).

Expanded Result

After performing all of the steps above, your XAML should appear as follows.

  • Run the project. The following image illustrates the resulting chart at runtime.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3154.

Expanded See Also

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