Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[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]Office File API
[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 2 - Create a Chart Using the Designer

This tutorial demonstrates the Chart Designer that allows you and your end-users to customize or create a chart from scratch. This lesson demonstrates the steps required to create a simple unbound chart using the designer.

Expanded Step 1. Create a New Project and Run the Chart Designer

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

  • Create a new WPF Application project.

  • Add the ChartControl component to your project, as you did in Lesson 1 (see step 1).

  • Click the ChartControl's smart tag, and in its actions list, select the Run Designer link.

This invokes the Chart Designer.

You can see the Side-by-Side Bar series (Series 1) in the Chart Elements Tree section. Note that Series 1 does not have series points.

Expanded Step 2. Add Series to the Chart

In this section, you add the second series to the chart and populate both series with points.

  • Select Series 1 in the tree and, in the Options tab, specify Population as the series's display name.

  • Expand the Population series options using the expand button and select the Points item.

  • In the Data tab, populate Argument and Value columns with data as follows:

Then, add the second series to the diagram (for example, the Area series). For this, do the following:

  • Click the Series item's Add button in the Elements Tree. In the invoked dialog, click the Area 2D series type. This adds the Area series (Series 2) to the chart with randomly generated data. Note that the arguments' axis scale type is defined based on the first series's qualitative data. The second series is hidden because it has numeric arguments.

  • Specify the second series's display name as Area.

  • Click the Clear Series Data button to clear automatically generated data.

  • Then, define the Area series points' data as follows:

Expanded Step 3. Customize the Chart

This section provides the steps allowing you to customize your chart's appearance.

Displaying Series in Separate Panes

The following steps show how to display each series in a separate pane:

  • Expand the Panes item. Click the Additional Panes item’s Add button to create a new pane.

  • Select the Area series in the Elements Tree. In the Options tab, locate the Pane option, and in its drop-down list, select the Pane #1 item.

Adding a Secondary Axis

You can add and customize a secondary axis by performing the steps below:

  • Expand the Axes item. Click the Secondary Axes Y item’s Add button to add a secondary y-axis.

  • Select the Area series. In the Options tab, set the Axis Y option to Secondary Axis Y #1 using the option's drop-down list.

  • Select the Secondary Axis Y #1 in the Elements Tree. Then, set the axis's Alignment option to Near.

  • The following image displays the results. Click the Save and Exit button to apply all the changes and close the designer.

Expanded Result

The following snippet shows the resulting markup:

Run the application. The following image illustrates the resulting chart at runtime:

Expanded See Also

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