ASP.NET Chart Control

Suggested Video Tutorials
C# Tutorial
ASP.NET Tutorial
ADO.NET Tutorial



In this video we will discuss displaying data using asp.net chart control. 



We want to display Student Names and their Total Marks in a barchart 


This is how the rendered barchart should be


Step 1 : Drag and drop Chart control from the toolbox on to the web from

Step 2 : Modify the HTML of the Chart control as shown below

<asp:Chart ID="Chart1" runat="server" Width="350">

    <Titles>

        <asp:Title Text="Total marks of students">

        </asp:Title>

    </Titles>

    <Series>

        <asp:Series Name="Series1"  ChartArea="ChartArea1">

            <Points>

                <asp:DataPoint AxisLabel="Mark" YValues="800" />

                <asp:DataPoint AxisLabel="Steve" YValues="900" />

                <asp:DataPoint AxisLabel="John" YValues="700" />

                <asp:DataPoint AxisLabel="Mary" YValues="900" />

                <asp:DataPoint AxisLabel="Ben" YValues="600" />

            </Points>

        </asp:Series>

    </Series>

    <ChartAreas>

        <asp:ChartArea Name="ChartArea1">

            <AxisX Title="Student Name">

            </AxisX>

            <AxisY Title="Total Marks">

            </AxisY>

        </asp:ChartArea>

    </ChartAreas>

</asp:Chart>

Run the application and notice that the data is displayed in a barchart as expected.

Please Note : 
1. To specify title for the chart use <Titles> element

2. The chart control consists of 2 main components - Series & ChartAreas. A chart can contain more than one series, and are associated with a particular Chart Area. In this example we have only one series. A series is a collection of data points.

3. To specify the X Axis title, we are using Title attribute of AxisX element and along the same line to specify the title for Y-Axis we are using Title attribute of AxisY element.

4. In this example, we are not explicitly associating the series with the ChartArea. Since we have only one series and one ChartArea, by default Series1 is associated with ChartArea1. To associate a specific series with a specific ChartArea use the ChartArea attribute of Series element as shown below.

<asp:Series Name="Series1"  ChartArea="ChartArea1">

If you specify a ChartArea that does not exist, you will get a run time exception - A chart element with the name 'ChartArea2' could not be found in the 'ChartAreaCollection'. In this demo we are displaying data using a Barchart. In our next video we will discuss different types of charts.