Lesson 1 - Create a Simple Unbound 3D Chart

• Sep 20, 2022
• 5 minutes to read

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.

• Step 1. Create a New Project and Add a Chart
• Step 2. Populate the Chart with Data
• Step 3. Customize the Chart
• Result

Step 1. Create a New Project and Add a Chart

• Run Microsoft Visual Studio.
• Create a new WPF Application project.

• Add the Chart3DControl to your project. You can do this by dragging the Chart3DControl component from the DX.24.1: 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.

XAML

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Chart3D_Lesson1"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Chart3D_Lesson1.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:Chart3DControl>
            <dxc:Chart3DControl.Legends>
                <dxc:Legend BorderBrush="Transparent" 
                            Background="Transparent"/>
            </dxc:Chart3DControl.Legends>
            <dxc:Series3DStorage>
                <dxc:Series3D DisplayName="Series 1">
                    <dxc:Series3D.View>
                        <dxc:SurfaceSeriesView>
                            <dxc:SurfaceSeriesView.FillStyle>
                                <dxc:GradientFillStyle/>
                            </dxc:SurfaceSeriesView.FillStyle>
                        </dxc:SurfaceSeriesView>
                    </dxc:Series3D.View>
                    <dxc:SeriesPoint3DStorage>
                        <dxc:SeriesPoint3D Value="0" XArgument="0" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="0" XArgument="0" YArgument="1"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="1" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="1" YArgument="1"/>
                        <dxc:SeriesPoint3D Value="0" XArgument="2" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="0" XArgument="2" YArgument="1"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="3" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="3" YArgument="1"/>
                    </dxc:SeriesPoint3DStorage>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>

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

  Note

  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.

XAML

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Chart3D_Lesson1"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Chart3D_Lesson1.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:Chart3DControl>
            <dxc:Chart3DControl.Legends>
                <dxc:Legend BorderBrush="Transparent" Background="Transparent"/>
            </dxc:Chart3DControl.Legends>
            <dxc:Series3DStorage>
                <dxc:Series3D>
                    <dxc:SeriesPoint3DStorage>
                        <dxc:SeriesPoint3D Value="130.32" XArgument="Canada"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="597.24" XArgument="Russia"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="333.45" XArgument="Germany" YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="232.49" XArgument="UK"      YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="125.28" XArgument="Spain"   YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="320.37" XArgument="Canada"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="199.08" XArgument="Russia"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="146.25" XArgument="Germany" YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="41.64"  XArgument="UK"      YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="80.91"  XArgument="Spain"   YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="81.45"  XArgument="Canada"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="151.68" XArgument="Russia"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="87.75"  XArgument="Germany" YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="65.93"  XArgument="UK"      YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="54.81"  XArgument="Spain"   YArgument="Nuclear"/>
                    </dxc:SeriesPoint3DStorage>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>

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.

XAML

<dxc:Chart3DControl AspectRatio="5 5 3">
<!-- Other Chart3D settings -->
</dxc:Chart3DControl>

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.

• For this, expand the Series3D object View property group and assign a RangeColorizer3D instance to the Series3DViewBase.Colorizer property.

  

• Then, set the series point value intervals that will be used to indicate points by various colors. For this, specify the RangeColorizer3D.RangeStops property to 0 80 150 300 600.

  

• Define the PaletteColorizer3DBase.Palette property to Office2013.

  

• Specify the Colorizer3DBase.LegendTextPattern property to {V1:F0} - {V2:F0} TWh/a to set the legend text format.

  

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.

Result

The final XAML is shown below.

View Example

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Chart3D_Lesson1"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Chart3D_Lesson1.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:Chart3DControl AspectRatio="5 5 3">
            <dxc:Chart3DControl.Legends>
                <dxc:Legend BorderBrush="Transparent" 
                            Background="Transparent"/>
            </dxc:Chart3DControl.Legends>
            <dxc:Chart3DControl.Titles>
                <dxc:Title Content="World Electricity Consumption" 
                           HorizontalAlignment="Center"/>
            </dxc:Chart3DControl.Titles>
            <dxc:Series3DStorage>
                <dxc:Series3D>
                    <dxc:Series3D.View>
                        <dxc:Bar3DSeriesView EqualBarSize="True">
                            <dxc:Bar3DSeriesView.Colorizer>
                                <dxc:RangeColorizer3D RangeStops="0 80 150 300 600" 
                                                      LegendTextPattern="{}{V1:F0} - {V2:F0} TWh/a">
                                    <dxc:RangeColorizer3D.Palette>
                                        <dxc:Office2013Palette/>
                                    </dxc:RangeColorizer3D.Palette>
                                </dxc:RangeColorizer3D>
                            </dxc:Bar3DSeriesView.Colorizer>
                        </dxc:Bar3DSeriesView>
                    </dxc:Series3D.View>
                    <dxc:SeriesPoint3DStorage>
                        <dxc:SeriesPoint3D Value="130.32" XArgument="Canada"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="597.24" XArgument="Russia"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="333.45" XArgument="Germany" YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="232.49" XArgument="UK"      YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="125.28" XArgument="Spain"   YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="320.37" XArgument="Canada"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="199.08" XArgument="Russia"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="146.25" XArgument="Germany" YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="41.64"  XArgument="UK"      YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="80.91"  XArgument="Spain"   YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="81.45"  XArgument="Canada"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="151.68" XArgument="Russia"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="87.75"  XArgument="Germany" YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="65.93"  XArgument="UK"      YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="54.81"  XArgument="Spain"   YArgument="Nuclear"/>
                    </dxc:SeriesPoint3DStorage>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>

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