How to Add Chart with Stacked of ASP.NET AJAX using CSharp

How to Build Chart with Stacked using C#

Home > How to > Chart With Stacked

If you want to display and compare the results of multiple data series, you may use this clustered stacked chart type. And with this stacked chart of ASP.NET AJAX, you can easily create a stacked bar chart, stacked spline area chart or stacked area chart. And this page will guide you to add a stacked bar chart in ASP.NET application using C# code. And the creating process applies well to both stacked spline area chart and stacked area chart.

Before conducting following settings, please drag an AjaxPanel item from toolbox to aspx web page and also drag a chart control to that AjaxPanel first.

Basic Settings

Sample C# Code for Setting Chart Type

To set the chart type, you can add following C# code to your aspx.cs file. Here two methods are offered and both can make the chart extended in the form of stacked bar chart.


KaxChart1.SeriesSet[0].View = ChartSeriesView. StackedBar;
KaxChart1.SeriesSet[1].View = ChartSeriesView. StackedBar;


KaxChart1.DefaultSeriesView = ChartSeriesView. StackedBar;

Sample C# Code for Setting Chart Skin

You can choose different skin and template for your web stacked bar chart graph. You can view the total data in one column of the stacked bar chart, each data item take some area of column according to the data content.

KaxChart1.Skin = "KetticStyle";

Set Stacked Bar Chart Title in C# Code

You are free to add and modify the title of stacked bar chart using following sample C# code, rotating, reiszing the web chart title is supported. And if you want to make the title link to other html page, you can also define the url property. More chart title elements can be found at setting chart title element in c#.


KaxChart1.Caption.Text = " Stacked Bar Chart";

Set Stacked Bar Chart Orientation Using C# Code

You can create the stacked bar chart either vertically or horizontally.

KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Stacked Bar Settings

Define Stacked Bar Chart Series in C#

The C# code below is used to add two data series into created stacked bar chart. Of course, you can add multiple data series by using the property KaxChart1.Series[]. And each data series can have different items, which is control by the property AddItem(). To view more tutorial, please follow this link to set chart series element using c#.


KaxChart1.SeriesSet[0].AddPoint(1.5, "Point1");
KaxChart1.SeriesSet[0].AddPoint(4, "Point2");
KaxChart1.SeriesSet[0].AddPoint(1, "Point3");
KaxChart1.SeriesSet[0].AddPoint(3.5, "Point4");
KaxChart1.SeriesSet[0].AddPoint(1, "Point5");

KaxChart1.SeriesSet[1].AddPoint(2, "Point1");
KaxChart1.SeriesSet[1].AddPoint(1, "Point2");
KaxChart1.SeriesSet[1].AddPoint(5, "Point3");
KaxChart1.SeriesSet[1].AddPoint(1, "Point4");
KaxChart1.SeriesSet[1].AddPoint(2.5, "Point5");

Using above sample C# code, we could easily add two data categories to source stacked bar chart. Now to enhance the chart visual effect, we can set each bar group with different colors. Then we can display the differences between different data series in a more vivid way. Besides, you can sort the groups of data to make the wanted order to show them. Then the web chart report will display the bars as you ordered, so you can make easy analysis to these data values.


KaxChart1.SeriesSet[0].StyleSet.Fill.PrimaryColor = System.Drawing.ColorTranslator.FromHtml("#CC3399");
KaxChart1.SeriesSet[1]. StyleSet.Fill.PrimaryColor = System.Drawing.ColorTranslator.FromHtml("#660033");

Set Chart Axis Using C# Code

In the real life application, to make our chart be better viewed and more easily understood, we need to customize the axis scaling and spacing of created stacked bar chart based on our source data value. For instance, if the scaling is much bigger than the data value, the whole chart will be too small to analyze. Since the axis contains x axis and y axis, we need to set the two dimensions respectively. More settings guidance, please follow the link to chart axis at set chart axis element with c#.


KaxChart1.Diagram.AxisX.MaxValue = 5;
KaxChart1.Diagram.AxisX.MinValue = 1;
KaxChart1.Diagram.AxisX.Step = 1;
KaxChart1.Diagram.AxisX.LayoutMode = Kettic.ASPX.Controls.Chart.Styles.ChartAxisLayoutMode.Normal;

KaxChart1.Diagram.AxisY.MaxValue = 5;
KaxChart1.Diagram.AxisY.Step = 0.5;
KaxChart1.Diagram.AxisY.AxisMode = ChartAxisYMode.Extended;

After you finish the basic and stacked bar settings using above sample C# code, you can easily create a simple stacked bar chart in ASP.NET web application. Of course, you can also view the final output of the sample stacked bar chart by running our Stackedbar chart online demo.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control

Overview Getting Started

Chart Element

Diagram Series Axes Legend Caption Tick Data Grid

Chart Type

Bar Chart Point Chart Line Chart Pie Chart Area Chart Gantt Chart Bubble Chart Bezier Chart Spline Chart Spline Area Chart Candle Chart Chart With Stacked Full Stacked Chart

Features

Automatic Layout Automatic Text-wrapping Scrolling Empty Values Scale Break Multiline Labels Wise Labels Marking Areas Multiple Types Interactive Drill Down Shadow Edting

Data Binding

Array Data List Data Database Data XML Data

Chart Style

Chart Skin ASP.NET AJAX Grid UI Control