Creating 3D (Three Dimensional) charts in ASP.NET

By | September 5, 2013

In this article I will explain how to 3D (Three Dimensional) maps in ASP.NET

Chart control in ASP.NET 4.0 displays charts in 2D (Two-Dimensional) by default. ASP.NET provides some properties with the ChartArea inside the Chart control that we can use to render charts in 3D.

You can refer to my previous article on how to create charts in ASP.NET using the Chart control to get started with the Chart control


<asp:Chart ID="chartProducts" runat="server" Width="800" Height="500" CssClass="auto">
        <asp:Series ChartArea="ProductChartArea" Name="ProductSeries">
                <asp:DataPoint AxisLabel="Rhönbräu Klosterbier" YValues="360" />
                <asp:DataPoint AxisLabel="Boston Crab Meat" YValues="220" />
                <asp:DataPoint AxisLabel="Boysenberry Spread" YValues="240" />
                <asp:DataPoint AxisLabel="Pâté chinois" YValues="350" />
                <asp:DataPoint AxisLabel="Röd Kaviar" YValues="150" />
        <asp:ChartArea Name="ProductChartArea"

To enable 3D charts we just need to set Area3DStyle-Enable3D property of the ChartArea to true. We also have some additional Area3DStyle properties like Inclination, Rotation, LightStyle, WallWidth, Perspective etc. that we can use to change the style of 3D chart.

In code behind we can use following code to enable 3D in the chart


ChartArea productChartArea = chartProducts.ChartAreas["ProductChartArea"];
productChartArea.Area3DStyle.Enable3D = true;
productChartArea.Area3DStyle.Inclination = 30;  //-90 to 90 degrees
productChartArea.Area3DStyle.LightStyle = LightStyle.Realistic; // None/Realistic/Simplistic
productChartArea.Area3DStyle.WallWidth = 10;    //0 to 30 pixels


Dim productChartArea As ChartArea = chartProducts.ChartAreas("ProductChartArea")
productChartArea.Area3DStyle.Enable3D = True
productChartArea.Area3DStyle.Inclination = 30
productChartArea.Area3DStyle.LightStyle = LightStyle.Realistic
productChartArea.Area3DStyle.WallWidth = 10

Note: You need to add reference to System.Web.DataVisualization and import System.Web.UI.DataVisualization.Charting class to access charting classes


3D Column Chart ASP.NET


Pyramid Chart ASP.NET

Leave a Reply

Your email address will not be published. Required fields are marked *