[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
    Overview - Chart
   [Collapse]Getting Started
     Lesson 1 - Create a Simple Unbound Chart
     Lesson 2 - Create a Chart Bound to Data
     Lesson 3 - Create a Chart Using a Series Template
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]Query Builder
 [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]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 1 - Create a Simple Unbound Chart

This lesson goes over the steps needed to build a chart in Visual Studio with manually created and populated series.

To create a simple unbound chart, do the following.

Expanded Step 1. Create a New Project

In this step, a new MVC application will be created using the DevExpress v18.1 Template Gallery. Also, a Controller and a View will be added to the application.

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

  • Open the New Project dialog. To do this, select the File | New | Project... menu item. In the invoked dialog, select the Web template group, then select the DevExpress v18.1 Template Gallery item. Specify the name of a project and click OK.

  • In the invoked DevExpress Template Gallery, select the ASP.NET MVC | Empty Web Application and click the Create Project button.


    If you create a new project using another template, refer to the Integration into an ASP.NET MVC Project topic group to learn how to integrate the DevExpress ASP.NET MVC Extensions to the project.

  • In the invoked Project Wizard, in the Choose Layout tab, select the empty layout.

  • Then, switch to Suites and specify the used suites as shown on an image below.

    Click Create Project to finish project creation.

  • Add a controller to manage a View. To do this, locate and right-click the Controllers folder in the Solution Explorer. In the invoked menu, locate the Add item and in the invoked submenu, select the Controller... item.

    In the invoked Add Scaffold dialog, select the MVC 5 Controller - Empty controller template and click Add.

    After that, the Add Controller dialog appears. In the dialog, set the controller name to ChartController and click Add.

  • Add a View that will contain a Chart. To do this, locate and right-click the Views | Chart folder in the Solution Explorer. In the invoked menu, locate the Add item and in the invoked submenu select the View... item.

    In the invoked Add View dialog, set the View name to Index, uncheck the Use a layout page: check box and click Add.

All preparatory work is complete. In the next step, the chart will be added to the View.

Expanded Step 2. Add a Chart to the View

  • Add a Chart to the View, add a series to the Chart and populate the series with series points. To do this, write the following code in the Index View.

    In the code snippet represented above, the HtmlHelperExtension.DevExpress method was called to get access to the DevExpress ASP.NET MVC Extensions. Then, a ChartControlExtension object was created using the ExtensionsFactory.Chart method with the specified ChartControlSettings object. Finally, the ExtensionBase.GetHtml method was called to insert the HTML code representing the chart.

    The SettingsBase.Name property of the ChartControlSettings was set to chart. Note that this property must be specified. Then, a Series object was created and its Series.Points collection was populated with several SeriesPoint objects. Finally, the series was added to the ChartControlSettings.Series collection.

  • Add two series with the 2001 and 2004 Series.Name property values and populate them with the following arguments and values.

    Argument 2001 series value 2004 series value
    Illinois 476.851 528.904
    Indiana 195.769 227.271
    Michigan 335.793 372.576
    Ohio 374.771 418.258
    Wisconsin 182.373 211.727

If you run the web application, it should look as follows.

The chart represents the required data. In the next step, the appearance of the chart will be improved.

Expanded Step 3. Customize the Chart

In this step, the chart appearance and palette is specified, the chart size is increased to improve its legibility, and chart and axis titles are added. Also, the series view is configured.

  • To customize chart appearance, specify the ChartControlSettings.AppearanceName property, and to change the chart palette, specify the ChartControlSettings.PaletteName property. The following code demonstrates how to do this.

  • To customize chart size, use the ChartControlSettings.Width and ChartControlSettings.Height properties.

  • To configure the series view, cast the SeriesBase.View to the SideBySideBarSeriesView to obtain access to specific options of the view type. Customize the BarSeriesView.FillStyle property. Set the FillStyle2D.FillMode to the FillMode.Solid.

  • To add a chart title, create a new ChartTitle object and add it to the ChartControlSettings.Titles collection.

  • To specify an axis title, cast the ChartControlSettings.Diagram to the XYDiagram and then, using the XYDiagram.AxisY property, get access to the Y-axis settings. After that, assign the Millions of USD string value to the Title.Text property of the Axis.Title. And finally, set the TitleBase.Visible to the DefaultBoolean.True to show the Y-axis title.

Expanded Result

The following code should be obtained as a result of this lesson.

Show Me

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

Run the application. The following image demonstrates its appearance.

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