[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Collapse]Chart Control
   [Expand]Product Information
   [Collapse]Getting Started
     Lesson 1 - Create a Chart using the Chart Designer
     Lesson 2 - Create a Simple Unbound Chart
     Lesson 3 - Bind Chart Series to Data
     Lesson 4 - Use a Series Template for Auto-Created Series
   [Expand]Design-Time Features
   [Expand]Visual Elements
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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 Chart using the Chart Designer

The following tutorial introduces the Chart Designer, which allows you (and your end-users) to create and customize a Web chart of any level of complexity. In this lesson, you will use the Designer to create a simple unbound chart.

Also, note that if the chart's ASPxDataWebControlBase.DataSource and ASPxDataWebControlBase.DataSourceID properties are defined, the Chart Designer also provides data binding settings to perform complex binding tasks.

This tutorial consists of the following sections.

Expanded Overview

By default, the Chart Designer is automatically invoked each time a WebChartControl is added from the toolbox (if the "Display the designer every time a new chart is added" option in the Chart Designer's status bar is enabled). Alternatively, you can click the chart’s smart tag and select Run Designer... from the invoked Tasks menu.

Expanded Chart Customization

Next, use the Chart Designer to configure the chart.

  • Customize the Chart Control and series appearance. Under the Options tab, click the drop down menu next to the Appearance option.

    Next, click the Palette option’s pulldown menu and select Office 2013.

  • In the chart elements tree, expand the Series Collection element and select Bar - to add a new series to the chart.

  • Finally, populate the series with points. This can be done manually (by specifying arguments and corresponding values for each point) or - if your chart's data source is defined - automatically (by specifying the data bindings for your series). See Providing Data for details.

    For this lesson, you will populate points manually. Expand the Series 1 element in the Series Collection subtree and select Points. Add all required arguments and values, as shown in the image below.

    Chart control customization is now complete. Click OK to apply changes and close the Designer.

Expanded Result

Run the application to see the results.

Expanded See Also

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