$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
How to Build Bar Chart using C#
Home > How to > Bar Chart
Bar chart is often used when we need to display and compare the values of multiple data series graphically. You can make the bar chart show in vertical and horizontal. And we provide rich chart templates, users can choose one to change their web chart simply. When creating bar chart using our ASP.NET AJAX controls, we can not only change its appearance and attributes using property panel directly but also modify its data series using C# code. And this article will guide you to build a simple bar chart using C# sample code.
Before doing the modification using C# code, you need to drag an AjaxPanel item to aspx page and put a chart control from toolbox to that AjaxPanel.

Basic Settings

The basic settings are mainly used to control the general appearance of bar chart.

C# Code for Setting Chart Type

You can set chart type to bar chart with either of following two methods. Sometimes, only one type of chart can not match your need, there maybe need two or more types in one chart, like bars chart and line chart for example. This is a simple operation in Kettic asp.net chart control, two charts combination just set the type different.
And sometimes, you may want to view 100 stacked bar chart in the html page, each bar will separate to multiple parts, and each group data will take over some area in each bar chart according to the data content.

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

KaxChart1.DefaultSeriesView = ChartSeriesView.Bar;

C# Code for Customizing Chart Skin

Rich chart skin options are supported. Deep color and light color are both supported, you can choose one you like, and then the web chart will draw with selected color and style.
KaxChart1.Skin = "KetticStyle";

C# Code for Writing Chart Title

Here we offer C# code for adding title to bar chart. If needed, you can view more settings for chart title at setting chart title element in c#.
KaxChart1.Caption.Text = "Bar Chart";

C# Code for Defining Chart Orientation

Users are able to display the bar chart either vertically or horizontally.
KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Bar Settings

The settings in this part are mainly used for adding and displaying various data series in bar chart. There may be single column or multiple columns in the bar chart. If you want to display multiple bars to chart, you need group you data series. You can make data values to categories according to the time, the goods size, the weight and other relative conditions. And before you inset these datas into the chart series, ordering and dictionary the data is also allowed.

Add Chart Data Series Using C# Code

Using the bar chart of ASP.NET AJAX, users can easily add one or more data series into bar chart. And each bar category will have a bar group to display its values. In following example, we will show you how to add two data series into bar chart. To view more guidance, 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");
Now two data categories have been successfully added to the bar chart. And in the real application, we may often need to differentiate each bar group with different colors so that readers can easily compare the values among different data series. And this performance can be done with the help of following sample C# code.

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

The axis has two dimensions, which are xaxis and yaxis. To better present the values of each data series, we need to customize the scaling and spacing values of the axis based on our own data source. If the scaling is too large, the bar chart will be too small to be read. Here we offer sample C# code for defining and customizing both xaxis and yaxis settings. If needed, you can view more settings for 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 configuration of aspx.cs file for creating a bar chart is completed. As metioned, you can handle many properties and api to work on the asp.net chart, with the help of this, you will get a useful report as bar chart to view. If you want to view the output of above configurations, please run our bar chart online demo.
ASP.NET AJAX UI Controls