Chart With Stacked|UI Control for ASP.NET AJAX, C#, VB.NET

Chart With Stacked in ASP.NET AJAX

Home > How to > Chart With Stacked

Information to Chart With Stacked

The clustered stacked chart is often used when you have two or more data series and want to view the combined values for each data series. If you also need to compare the contributions of values within data series, you may try this 100% stacked chart type. Three chart types are supported by this stacked chart of ASP.NET AJAX control, which are stacked bar chart, staked spline area chart and stacked area chart. And in this article, we will put our focus on the building of a stacked bar chart.

generate stacked chart image in asp.net ajax using c#

generate stacked chart image in asp.net ajax using c#

How to Build a Simple Stacked Bar chart

Stacked bar chart is often known as stacked column chart. The making of a simple stacked bar chart mainly contains two parts. One is to define the chart appearance and the other is to add data series to target chart. In following text, we will illustrate the stacked bar chart creating process with sample ASP.NET code.

Before that, please drag an AjaxPanel from the toolbox to an aspx web page and then put a chart control into that AjaxPanel.

Basic Settings

The settings in this part have two functions, choose the chart type and set the chart appearance. And the basic settings contain four parts and can be all done within the property window.

Define the chart type: Set the Chart DefaultSeriesView property or ChartSeries.View to StackedBar.
Define the chart theme by using the ChartCaption.Text property. You can make the chart title as plain text or a link. If you want to make the title as a link, you can define the url and tooltip properties.
Since this stacked bar chart supports both vertical and horizontal orientations, you can set the chart orientation as you wish. Here we set the chart as vertical by changing the SeriesOrientation property to Vertical.
Rich skin and template options are supported and you can customize the stacked bar chart appearance by using the style properties, such color and css type.

We provide C# example to show you how to define these basic settings of stacked chart.


KaxChart1.DefaultSeriesView = ChartSeriesView. StackedBar;
KaxChart1.Skin = "KetticStyle";
KaxChart1.Caption.Text = " Stacked Bar Chart";
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Bar Settings

In above section, we have customized the appearance style of created stacked bar chart in our ASP.NET AJAX application. Here we will illustrate how to add and display source data in that web stacked bar chart graphs.


<kettic:ChartSeries Name="Series 1" View=" StackedBar ">
                            <Points>
                                <kettic:ChartSeriesPoint  Value="1.5"  Name="Point 1">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="4"  Name="Point 2">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="1"  Name="Point 3">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="3.5"  Name="Point 4">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="1"  Name="Point 5">
                                </kettic:ChartSeriesPoint>
                            </Points>
                        </kettic:ChartSeries>
<kettic:ChartSeries Name="Series 2" View=" StackedBar ">
                            <Points>
                                <kettic:ChartSeriesPoint  Value="2"  Name="Point 1">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="1"  Name="Point 2">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="5"  Name="Point 3">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="1"  Name="Point 4">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="2.5"  Name="Point 5">
                                </kettic:ChartSeriesPoint>
                            </Points>
                        </kettic:ChartSeries>

As is said above, the stacked bar chart enables users to compare multiple data series. Thus, the number of data series in the stacked bar chart is not fixed and it is determined by your source data categories. Before drawing the html stacked bar chart, you can order and sort the input data group values. By default, the first data series will display at the bottom area of each bar graphics.
And in following ASP.NET code, we will guide you to customize the each data series using the property ChartSeries. Another feature of the stacked bar chart is that each bar series may contain various items. And the items can be easily defined by using the property ChartSeries.Points. Besides, the axis of chart is also allowed to customized, please see the C# code below.


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;

More settings of Series to see Chart Series Element.

Information to Chart With Stacked

How to Build a Simple Stacked Bar chart

Basic Settings

Bar Settings

See Also