[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
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Expand]Getting Started
    [Expand]Providing Data
    [Expand]Chart Elements
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Collapse]Design-Time Features
      Chart Designer
      Pattern Editor
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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)

Chart Designer

The Chart Designer is a tool for building charts of any complexity from scratch and customizing existing charts without using the Visual Studio Properties window.

This topic describes how to invoke the Chart Designer, explains its structure and provides an example of how to build a chart using this designer.

Expanded How to: Invoke the Chart Designer

Click the Chart Control's smart tag, and in its actions list, select the Run Designer link to invoke the designer at design time.

After that, the Chart Designer appears.

You can also invoke the Chart Designer at runtime using the ChartDesigner.Show method:

The code uses the following classes and properties:

Class or Property Description
ChartDesigner The Chart Designer.
ChartDesigner.Show Invokes the Chart Designer.
Theme A theme.
DesignerWindowKind Lists the possible Chart Designer types.

Refer to the Chart Designer for End-Users topic for more information.

The following image displays the Chart Designer's main elements:

Expanded Chart Elements Tree

The Chart Elements Tree represents chart structure and allows you to select chart elements, customize their visibility, and add or remove elements. When you click an element in the tree, it is highlighted in the Chart Preview section, and the Customization Tabs area displays the element's properties.

Expanded Chart Preview

The Chart Preview area allows you to see how the chart looks. You can click a chart element to show its properties in the Customization Tabsarea.

Expanded Customization Tabs

The Customization Tabs section comprises tabs that allow you to configure a chart's settings.

  • The Options tab contains commonly used element settings.

  • The Properties tab contains all the chart elements' settings.

  • The Data section is shown when a series points' collection is selected in the Elements Tree. In this tab, you can manually edit the points' collection, for example, remove existing points and add new ones.

    The Data tab is also available when the Chart control is data-bound. In this case, you can specify the data members that define data source fields used to provide data to the chart.

Expanded The Add Chart Element Button

You can use the button to invoke a list of elements that can be added. In the list, select the appropriate item to add the element to the chart, series or axis depending on which element is selected in the Elements Tree.

Expanded The Change Chart Type Button

Use the button to invoke an available series types' list. You can select the required series type to be applied to all series in a chart.

Expanded Examples

Refer to the Lesson 2 - Create a Chart Using the Designer tutorial to learn how to build a chart using the designer.

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