Full Stacked Chart guide, UI control for ASP.NET AJAX, CSharp sample code

How to Build Full Stacked Chart using c#

Home > How to > Chart With 100% Stacked

The 100 percentages full stacked chart type is created to help users compare values within data series and view the differences among multiple data categories at the same time. And this chart type of ASP.NET AJAX full stacked chart allows users to easily build full stacked bar chart, full stacked spline area chart or full stacked area chart in target applications.

But since above three 100% stacked chart types share almost the same building process, this online tutorial page will use the creation of a full stacked bar chart as an example to tells users how to add a full stacked chart of ASP.NET AJAX using C# .NET programming code.

One thing that needs to be mentioned here is that to achieve AJAX effect, you need to drag the AjaxPanel item from Toolbox to source aspx web page and put a chart control from Toolbox into that AjaxPanel. After you finish above two operations, you need to modify above created chart to desired 100 percentages stacked bar chart in aspx.cs file using C# code. And the modifications will be achieved from two main parts, which are basic settings and stacked bar settings.

Basic Settings

The basic settings for creating a full stacked bar chart using ASP.NET AJAX control covers the areas of choosing the right chart type and customizing the chart appearance style.

How to Set Chart Type Using C# Code

After adding the chart control in your application, you can display the chart in the form of full stacked bar by adding following C# codes in the aspx.cs file. And here we offer two C# programming methods for you to set the chart type to 100% stacked bar chart.

KaxChart1.Series[0].Type = ChartSeriesType.FullStackedBar;
KaxChart1.Series[1].Type = ChartSeriesType.FullStackedBar;

KaxChart1.DefaultType = ChartSeriesType.FullStackedBar;

How to Customize Chart Style Using C# Code

This web 100% stacked chart control also offers rich chart skin and template options for users to help them create fully customized full stacked bar chart.

KaxChart1.Skin = "Kettic";

How to Define Chart Title Using C# Code

If you want to display the theme in target full stacked bar chart, you can add a title to it using following C# code. You can define title as link with url and tooltip. More chart title settings, please visit setting chart title element in c#.

KaxChart1.ChartTitle.TextBlock.Text = "Full Stacked Bar Chart";

How to Set Chart Orientation Using C# Code

You are free to set the full stacked bar chart to horizontal or vertical using C# code in ASP.NET applications. Following are the C# codes for defining the chart orientation.

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

100% Stacked Bar Settings

This part will show you how to add data into target full stacked bar chart. There is no limit on the number of data series, which means the full stacked bar chart can have one or more data series. And each data series group will have a full stacked bar to display its values. And you can sort and reorder the data items and data series group, then the web chart graph will draw the new chart with new order. If there are multiple data series groups in chart control, the view of chart column is combining the data groups together, the each data takes an area according to the data tontent. Here we will guide you to add two data series into target full stacked bar chart. More settings, please read 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");

If you want to increase the visibility of your full stacked bar chart, you can set different colors to each bar group. Eacn data group with different color, so you can recognize the data trend more clearly, and can make a better analysis.


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

Define Chart Axis Using C# Code

In general, the axis contains two dimensions, which are x axis and y axis. And in the application of full stacked bar chart, to better view created chart, we need to set the axis scaling and spacing based on our data source. To view more, please look at 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;

Now the building of a simple full stacked bar chart is finished. And you can view final output of above full stacked bar settings by visiting 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