Area chart is appropriate for showing the trends of multiple data series, especially when the data category has a series of data that changes over time. Besides simple area chart, Kettic web chart control supply stacked area chart as well as stacked bar chart and stacked spline chart using C# .net. This online tutorial offers detailed guidance for you to create an area chart in your ASP.NET web application.
First of all, to achieve the AJAX effect, please put an AjaxPanel item from the toolbox into your aspx page and then drag a chart control to that AjaxPanel. Now we need to modify some configurations in the aspx.cs file by adding some C# code. Basic SettingsC# Code to Set Chart Type
Open your aspx.cs file and add either of following two snippets of C# codes. Then the chart will be displayed in the form of area chart.
C# Code for Designing Chart Appearance
The area chart of our ASP.NET AJAX offers rich chart skin and background options to meet users' needs. Both dark and light themes are supported, choose the theme you like, and use the chart template to make your area chart take a special surface. KaxChart1.Skin = "KetticStyle";C# Code to Set Chart Title
In the practical application, we may add a chart title so that viewers can better understand the area chart, contains title text font, color, title border and rotation. Besides, you can find more chart title settings at setting chart title element in c# KaxChart1.Caption.Text = "Area Chart";C# Code to Define Chart Orientation
You can display the area chart either vertically or horizontally. KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal; Area Settings
From this part, you will find sample C# code for adding data series to above created area chart. How to Modify Chart Data Series Using C#
The area chart can has single or multiple data series, which is determined by your source data. Users are free to define the data categories and add items to each data series. If there are multiple data series to flex in the chart, the first data series will display at the front of the plot area in the chart, so that the other chart area looks like being covered in some parts. The C# example code below is used to display two different data series in the area chart.
Of course, if you want to differentiate each series in a more direct way, you can also use following C# code to display each data category in your pre-defined colors.
How to Customize Chart Axis Using C# Code
To better visualize the data points and clearly display the trends of each data series, we need to set the chart axis based on the source data. And here we offer two snippets of sample C# codes to guide you for setting the xaxis and yaxis dimensions of area chart respectively. If you want to view more chart axis setting guidance, please visit this chart axis at set chart axis element with c#.
Now the settings for building a simple area chart are finished. And you are free to run our area chart online demo to view the output of these area chart settings. If you have any problems or suggestions in the process of testing these sample C# code, please feel free to contact us. | 
ASP.NET AJAX UI Controls ASP.NET AJAX Chart UI Control OverviewGetting StartedChart Element DiagramSeriesAxesLegendCaptionTickData GridChart Type Bar ChartPoint ChartLine ChartPie ChartArea ChartGantt ChartBubble ChartBezier ChartSpline ChartSpline Area ChartCandle Chart Chart With StackedFull Stacked ChartFeatures Automatic LayoutAutomatic Text-wrappingScrollingEmpty ValuesScale BreakMultiline LabelsWise LabelsMarking AreasMultiple TypesInteractiveDrill DownShadowEdtingData Binding Array DataList DataDatabase DataXML DataChart Style Chart SkinASP.NET AJAX Grid UI Control |