How to create a 3D Chart in C# WPF?

3 mins read

This KB article explains how to create a simple 3D chart with header, legend, axis, and series in C# WPF.

The User Guide Documentation helps you to acquire more knowledge on 3DChart and its features. The assembly required for creating the 3DChart is “Syncfusion.SfChart.WPF”.

Creating chart title

The title can be set by using the Header property of the chart.

SfChart3D chart3D = new SfChart3D();
chart3D.Header = "Chart 3D";

Creating axis for chart

The required type of axes can be set by using PrimaryAxis and SecondaryAxis properties as demonstrated in the following code snippet.

CategoryAxis3D primaryAxis3D = new CategoryAxis3D();
primaryAxis3D.Header = "Name";
primaryAxis3D.FontSize = 14;
chart3D.PrimaryAxis = primaryAxis3D;
 
NumericalAxis3D secondaryAxis3D = new NumericalAxis3D();
secondaryAxis3D.Header = "Height(in cm)";
secondaryAxis3D.FontSize = 14;
chart3D.SecondaryAxis = secondaryAxis3D;

Adding series

Add the required type of series to the chart and set the populated data collection to the series using the ItemsSource property of the chart series. Then, map the XBindingPath and YBindingPath properties of chart series to the required properties in the model to retrieve the data from the model and render the 3D chart.

ColumnSeries3D columnSeries3D = new ColumnSeries3D();
columnSeries3D.XBindingPath = "Name";
columnSeries3D.YBindingPath = "Height";
columnSeries3D.ItemsSource = (chart3D.DataContext as ViewModel).Data;
columnSeries3D.Label = "Height";
chart3D.Series.Add(columnSeries3D);

Populating data for chart series

Generate the required Model and ViewModel to bind the data point for the chart. The following code snippet demonstrates a simple data model that represents a data point and create the view model for data.

public class Person
{
    public string Name { get; set; }
 
    public double Height { get; set; }
}
 
public class ViewModel
{
    public List<Person> Data { get; set; }
 
    public ViewModel()
    {
        Data = new List<Person>()
        {
            new Person { Name = "David", Height = 180 },
            new Person { Name = "Michael", Height = 170 },
            new Person { Name = "Steve", Height = 160 },
            new Person { Name = "Joel", Height = 182 },
        };
    }
}

Set the ViewModel instance as the DataContext for the chart or your window ; this is done to bind properties of ViewModel to chart.

chart3D.DataContext = new ViewModel();

Adding legend

The legend can be added by using the Legend property of the chart. The following code snippet shows how to add legend for the chart.

Chart3D.Legend = new ChartLegend();

Additionally, you need to set label for each series using Label property of series, which will be displayed in corresponding legend item.

columnSeries3D.Label = "Height";

The following code snippet gives you the consolidated configuration of all the above codes in creating a simple 3D chart.

Code snippet

            SfChart3D chart3D = new SfChart3D();
 
            // Setting header for the SfChart3D.
            chart3D.Header = "3D Chart";
 
            // Setting DataContext for SfChart3D.
            chart3D.DataContext = new ViewModel();
 
            // Adding Legend to the SfChart3D.
            chart3D.Legend = new ChartLegend();
 
            // Initialize the horizontal axis for SfChart3D.
            CategoryAxis3D primaryAxis3D = new CategoryAxis3D();
            primaryAxis3D.Header = "Name";
            primaryAxis3D.FontSize = 14;
            chart3D.PrimaryAxis = primaryAxis3D;
 
            // Initialize the vertical axis for SfChart3D.
            NumericalAxis3D secondaryAxis3D = new NumericalAxis3D();
            secondaryAxis3D.Header = "Height(in cm)";
            secondaryAxis3D.FontSize = 14;
            chart3D.SecondaryAxis = secondaryAxis3D;
 
            // Initialize the series for SfChart3D.
            ColumnSeries3D columnSeries3D = new ColumnSeries3D();
            columnSeries3D.XBindingPath = "Name";
            columnSeries3D.YBindingPath = "Height";
            columnSeries3D.ItemsSource = (chart3D.DataContext as ViewModel).Data;
            columnSeries3D.Label = "Height";
            chart3D.Series.Add(columnSeries3D);

Output

Create Simple Chart3D in C# WPF

Take a moment to peruse the documentation, where you can find the brief description about creation of chart.

Refer here to explore interactive features available in chart.

How to create a 3D Chart in C# WPF?

Output

Access denied