[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
   [Expand]Chart Control
   [Collapse]Chart3D Control
    [Collapse]Getting Started
      Lesson 1 - Create a Simple Unbound 3D Chart
      Lesson 2 - Create a Chart3D Control with a Series Bound to Data
      Lesson 3 - Create a 3D Chart with Automatically Generated Series
  [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)

Lesson 1 - Create a Simple Unbound 3D Chart

In this tutorial, you will learn how to design a simple 3D chart, populate it with data, and configure common chart settings.

Execute the following steps to create an application with a 3D chart.

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

  • Run Microsoft Visual Studio 2012, 2013, 2015, 2017 or 2019.
  • Create a new WPF Application project.
  • Add the Chart3DControl to your project. You can do this by dragging the Chart3DControl component from the DX.19.2: Data & Analytics Toolbox tab to the main window.

  • Right-click the Chart3D control and select Layout | Reset All in the context menu. This will stretch the chart to fill the entire window.

After performing these actions, the XAML markup should look as follows. If it does not, overwrite your markup with the markup below.

Expanded Step 2. Populate the Chart with Data

In this step, you will manually add a series to the 3D chart, and manually populate this series with points.

  • By default, the 3D chart series source is set to Series3DStorage. This storage's Series3DStorage.Series collection keeps all manually added series. To invoke the collection editor, click the ellipsis button opposite the Series3DStorage.Series property.

  • Remove the default series from the Series3DStorage.Series collection.

  • Then, add a series by clicking the Add button.

  • To manually populate the series with points, assign a SeriesPoint3DStorage object to the Series3D.PointSource property.

  • Expand the PointSource property group and click the ellipsis button opposite the SeriesPoint3DStorage.Points property to invoke series points editor.

  • Click the Add button to add a point to the point collection.

  • Next, you need to define the point SeriesPoint3D.XArgument, SeriesPoint3D.YArgument and SeriesPoint3D.Value properties as the following image shows.

  • Repeat two previous actions to add other points. Use the following table data to define points parameters.

    Value X-argument Y-argument
    130.32 Canada Fossil
    597.24 Russia Fossil
    333.45 Germany Fossil
    232.49 UK Fossil
    125.28 Spain Fossil
    320.37 Canada Renewable
    199.08 Russia Renewable
    146.25 Germany Renewable
    41.64 UK Renewable
    80.91 Spain Renewable
    81.45 Canada Nuclear
    151.68 Russia Nuclear
    87.75 Germany Nuclear
    65.93 UK Nuclear
    54.81 Spain Nuclear

    If necessary, you can copy the code implementing points at the end of this section.

  • Click OK to leave the SeriesPoint3D Collection Editor. Click OK again to leave the Series3D Collection Editor.

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

Expanded Step 3. Customize the Chart

Follow the instructions in this section to configure the chart appearance.

Specify a Series View Type

The appearance of a series depends on its view. To set the series view type, assign a Bar3DSeriesView object to the Series3D instance's Series3DBase.View property.

Set Diagram Proportions

To change proportional relationship between diagram height, width and depth, define the Chart3DControl.AspectRatio property to 5 5 3. For this, use XAML below.

To set an equal size for all bars in the chart, specify the Bar3DSeriesView.EqualBarSize property to true.

Colorize the Series

Provide specific colors to each series point based on its value.

Add a Title

  • Add a title to your chart. For this, click the ellipsis button opposite the ChartControlBase.Titles property.

  • Click Add to add a new title to the Titles collection.
  • Specify the TitleBase.Content property as World Electricity Consumption.

  • Then, modify the title position by setting the TitleBase.HorizontalAlignment property to Center.

  • Click the OK button to perform the changes and hide the editor.

Expanded Result

The final XAML is shown below.

The application is now ready. Run the project to see the results. The following image demonstrates the resulting chart at runtime.

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