How to create charts in ASP.NET 4.0 using built-in Chart control

By | August 19, 2013

In this article I will explain how to create charts in ASP.NET 4.0 using the Chart control introduced in ASP.NET 4.0

ASP.NET 4.0 introduced a new data control “Chart” with Visual Studio 2010. Chart control can be used to create around 35 types of interactive charts. Data in the chart controls can be added declaratively or from the database. Chart data can be manipulated using its built-in methods.

Step 1: Create a new ASP.NET Application

Step 2: Drag a Chart Control on Default.aspx page from the Toolbox under the Data section. Following markups are added in the HTML source of the page for the Chart control

<asp:Chart ID="Chart1" runat="server">
        <asp:Series Name="Series1">
        <asp:ChartArea Name="ChartArea1">

The Chart control contains two collections, Series and ChartAreas. Series collection contains different Series object. A Series object is a collection of DataPoints which represents data in the chart. Different Series can be added for different type of ChartArea.

ChartAreas collection contains different ChartArea objects. A ChartArea object defines appearance of a Chart where data is plotted.

Step 3: After adding the Chart control on the page, some configuration is automatically added to the application to handle the charts. So please ensure that following tags are added in your web.config file

    <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />

        <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

Step 4: Edit the Chart control in the HTML source as following to add some sample data to show in the chart

<asp:Chart ID="chartProducts" runat="server" Width="800" Height="500">
        <asp:Series ChartArea="ProductChartArea" Name="ProductSeries" ChartType="Column">
                <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">

Here, first we have set the ChartType of the Series object “ProductSeries” to “Column” to create a Column chart. We also set ChartArea property to the ChartArea object “ProductChartArea”, which specifies that “ProductSeries” series is associated with “ProductChartArea” ChartArea.

Then we added some DataPoint objects inside the “ProductSeries” to plot the data. YValues is the value used to generate the chart and AxisLabel is the label for that value.


Column Chart

ASP.NET Column Chart

Pie Chart (When ChartType of the Series “ProductSeries” is changed to “Pie”)

ASP.NET Pie Chart

0 thoughts on “How to create charts in ASP.NET 4.0 using built-in Chart control

  1. Pingback: Creating 3D (Three-Dimensional) charts in ASP.NET | DEEPAK SHARMA

  2. Peterphync

    Your comment is awaiting moderation.

    Nicely put. Thanks!
    where to buy authentic cialis buy cialis online saw palmetto and cialis cheap cialis
    como funciona cialis 20 mg
    cialis cheap online
    <a href="″>comparacion levitra viagra cialis
    cialis feminino
    cheap canadian pharmacy cialis
    <a href="”>cialis medication guide


Leave a Reply

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