AreaChart Demonstration

AreaChart Description 

 

The AreaChart control enables you to render a area chart from one or more series of values. This control is compatible with any browser which supports SVG including Internet Explorer 9 and above.

This control can display two types of Areacharts - Basic, Stacked.

AreaChart Properties 

 

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:AreaChart ID="AreaChart1" runat="server" 
ChartHeight="300" ChartWidth="450" ChartType="Basic"
ChartTitle="United States versus European Widget Production" 
CategoriesAxis="2007,2008,2009,2010,2011,2012" 
ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9" 
ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">
<Series>
    <ajaxToolkit:AreaChartSeries Name="United States" 
    AreaColor="#6C1E83" Data="110, 189, 255, 95, 107, 140" />
    <ajaxToolkit:AreaChartSeries Name="Europe" 
    AreaColor="#D08AD9" Data="49, 77, 95, 68, 70, 79" />
</Series>        
</ajaxToolkit:AreaChart>    

AreaChart Properties

• ChartHeight - This property enables you to customize the height of the chart.
• ChartWidth - This property enables you to customize the width of the chart.
• ChartTitle - This property enables you to set the title of the chart.
• CategoryAxis - This is a required property. You need to provide a set of values for the category axis to create a line chart.
• ChartType - This property enables you to render two types of area charts 1. Basic 2. Stacked.
• Theme - This property enables you to control the appearance of the area chart with a Cascading Style Sheet file.
• ValueAxisLines - This property enables you to set the interval size for the value axis line.
• ChartTitleColor - This property enables you to set the font color of the chart title.
• CategoryAxisLineColor - This property enables you to set the color of the category axis lines.
• ValueAxisLineColor - This property enables you to set the the color of the value axis lines.
• BaseLineColor - This property enables you to set the color of the base lines of the chart.

AreaChartSeries Properties:

• Name - This is required and you need to provide the name of series.
• AreaColor - This property enables you to set the color of area for a particular series.
• Data - This property is required and provides data for a particular series.