AJAX Control Toolkit Tutorial: AreaChart - Part Six

In this article we will see how we can use the Ajax control toolkit AreaChart control with examples. This is part six of the article series.

Area Chart displays the statistical data in a graphical format. It renders a chart by one or more series values. It is compatible with any browser which supports SVG and also Internet Explorer higher than 9.

  1. Stacked Area Chart
  2. Basic Type Area Chart

Let’s see initial code with its output then we can check the properties in detail.

  1. <ajaxToolkit:AreaChart ID="AreaChart1" runat="server" 2.   
  2.    ChartHeight="300" ChartWidth="450" ChartType="Basic   
  3.    ChartTitle="Pakistan versus European Widget Production"   
  4.    CategoriesAxis="2007,2008,2009,2010,2011,2012"   
  5.    ChartTitleColor="#0E426C" CategoryAxisLineColor="red"   
  6.    ValueAxisLineColor="REd" BaseLineColor="Red">   

  7.    <Series>   
  8.       <ajaxToolkit:AreaChartSeries Name="Pakistan"   
  9.       AreaColor="Green" Data="110, 189, 255, 95, 107, 140" />   
  10.       <ajaxToolkit:AreaChartSeries Name="Europe"   
  11.       AreaColor="Blue" Data="49, 77, 95, 68, 70, 79" />   
  12.    </Series>   
  13. </ajaxToolkit:AreaChart>   
Output



Properties 
  • ChartHeight

    By using this property you can customize the height of the chart.

    ChartHeight="500"


  • ChartWidth

    You can customize the chart width by using this property by defining the units.

    ChartWidth="800"


  • ChartTitle

    You can customize the area chart title by using the property

    ChartTitle="Pakistan versus European Widget Production"



  • CategoryAxis

    A mandatory field. You need to provide a set of values for the category axis to create a line chart.

    CategoriesAxis="2011,2012,2013,2014,2015,2016"



  • ChartType

    There are two types of area chart types and you can set from here by using the Property:



    1. Stacked
    2. Basic

    Stacked



    Basic



  • Theme

    You can define the Cascading style sheet to color your chart.

  • ValueAxisLines

    This property enables you to set the interval size for the value axis line. The default value is 9, you can give a unit value to this property to how many lines to be shown.

    ValueAxisLines="20"



  • ChartTitleColor

    This property enables you to set the font color of the chart title. You can customize what color value you want.

    ChartTitleColor="#0E426C"



  • CategoryAxisLineColor

    This property enables you to set the color of the category axis lines.

    CategoryAxisLineColor="Black"



  • ValueAxisLineColor

    This property enables you to set the the color of the value axis lines.

    ValueAxisLineColor="REd"



  • BaseLineColor

    This property enables you to set the color of the base lines of the chart.

    BaseLineColor="Purple"


    1. AreaChartSeries Properties:  
    2. <Series>   
    3.    <ajaxToolkit:AreaChartSeries Name="Pakistan"   
    4.    AreaColor="Green" Data="110, 189, 255, 95, 107, 140" />   
    5.    <ajaxToolkit:AreaChartSeries Name="Europe"   
    6.    AreaColor="Blue" Data="49, 77, 95, 68, 70, 79" />   
    7. </Series>  
  • Name

    This is required and you need to provide the name of series.

    Name="Pakistan"


  • AreaColor

    This property enables you to set the color of area for a particular series.

    AreaColor="Green"


  • Data

    This property is required and provides data for a particular series.

    Data="110, 189, 255, 95, 107, 140"