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

Introduction:
In this article I will explain how to create 3D (Three-Dimensional) charts in ASP.NET 4.0

Description:
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 How to create charts in ASP.NET 4.0 using built-in Chart control to get started

Example:

<asp:Chart ID="chartProducts" runat="server" Width="800" Height="500" CssClass="auto">
    <Series>
        <asp:Series ChartArea="ProductChartArea" Name="ProductSeries">
            <Points>
                <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" />
            </Points>
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ProductChartArea"
            Area3DStyle-Enable3D="true"
            Area3DStyle-Inclination="30"
            Area3DStyle-LightStyle="Realistic"
            Area3DStyle-WallWidth="10">
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>

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 control
C#:

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

VB.NET:

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

Output:

Column Chart - ASP.NET

Column Chart – ASP.NET

Pyramid chart ASP.NET

Leave a Reply

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