Set up Chart Series guide in ASP.NET, rich C# sample code for series items with Xvalue, Yvalue, chart type, name, label value and chart style

How to Put up Series of Chart Using C#

Home > How to > Chart Series

Series is the most important chart element, which stands for single and multiple series of data points that are displayed on chart. KT.UI C# ASP.NET AJAX Chart SDK offers client users the comprehensive chart series control to add user-defined series to chart.

This page is designed to help users easily and quickly add chart series and modify its properties via C# programming language. You can rename the series item, change the series order, define the series format, add a new series, update or delete an existed series data in the network chart control.

Series Items

This part is designed to demonstrate Items property of C# ChartSeries control. The Item attribute consists of three significant properties: ActiveRegion, Appearance and Label.

How to Set XValue and YValue with C# Codes

Generally, we can display data values via XValue and YValue(hide the other axis values). While in Gantt and Bubble chart, we need to use XValue2 and YValue2 to show the value of a set of data points with XValue and YValue. And in CandleStick chart, we use YValue3 and YValue4 to show certain information. In CandleStick char, YValue stands for open, YValue2 stands for close, YValue3 stands for Max, and YValue4 stands for Min. See following C# demo codes.


ChartSeriesItem item = newChartSeriesItem();
item.XValue = 4;
item.YValue = 4;            
KaxChart1.Series[0].Items.Add(item);

When the chart types are Gantt and Bubble, we can set YVlaue and YVlaue2.

ChartSeriesItem item = newChartSeriesItem();
item.YValue = 4;
item.YValue2 = 5;           
KaxChart1.Series[0].Items.Add(item);

When the chart type is CandleSticked, we can set YValue, YValue2, YValue3 and YValue4.

ChartSeriesItem item = newChartSeriesItem();
item.YValue = 4;
item.YValue2 = 5;
item.YValue3 = 2;
item.YValue4 = 6;
KaxChart1.Series[0].Items.Add(item);

How to Set Chart Type with C# Codes

We can use different chart types for two sets of data points, and combine the two type chart to a whole chart using C# code, such as, we can use "ChartSeries.Type" object to set one data series displayed in Line type and the other displayed in Bar type.

KaxChart1.Series[0].Type = ChartSeriesType.Bar;
KaxChart1.Series[1].Type = ChartSeriesType.Line;

How to Set Empty Value with C# Codes

If you set empty value in the series, our chart tool can identify the null value, and will draw this series as blank or transparent. Check out following C# sample codes to set empty value.

ChartSeriesItem item = newChartSeriesItem();
item.YValue = 4;
item.Empty = true;
item.Label.Visible = false;
KaxChart1.Series[0].Items.Add(item);

DefaultLabelValue

The format of label values can be automatically displayed with the help of C# DefaultLabelValue object.

"#Y" or "#X": used to display respective numbers from X or Y axis
"#%": used for the percentage of total sum
"#SUM": used to display the total of all items
"#STSUM": used to show the total of a stacked series
"#SERIES": used to display the name of series
"#SERIES": used to display the name of series

Besides, we also can use the formats in MSDN, but we need to use curly brackets to contain the standard numeric formats, for example: #X{F}.


KaxChart1.Series[0].DefaultLabelValue = "#X{F}";

Appearance Specific Properties

Appearance in Bubble

The BubbleSize property is specific to the Bubble chart type and allows you to increase or decrease bubble size without distorting the shape.


KaxChart1.Series[0].Appearance.BubbleSize = 30;

Appearance in Line and Spline

The LineSeriesAppearance property is applied to the Line and Spline chart types. Users can refer to following C# codes to set Line and Spline appearances.

KaxChart1.Series[0].Appearance.LineSeriesAppearance.StartCap = System.Drawing.Drawing2D.LineCap.Round;
KaxChart1.Series[0].Appearance.LineSeriesAppearance.EndCap = System.Drawing.Drawing2D.LineCap.Flat;
KaxChart1.Series[0].Appearance.LineSeriesAppearance.PenStyle = System.Drawing.Drawing2D.DashStyle.Dash;
KaxChart1.Series[0].Appearance.LineSeriesAppearance.Width = 3;

Appearance in Pie

Specific Pie chart visualization appearance attributes are listed below.

StartAngle: is the rotating degree for Pie chart, the default value is 0
DiameterScale: is the ratio of the diameter of the pie chart
ShowLabelConnectors: is the black line that links the pie and the label
ExplodePercen: is the distance between the cut part and the center
CenterXOffset and CenterYOffset: is the deviation distance between the circle center and center point

C# sample codes for set Pie chart appearance.

KaxChart1.Series[0].Appearance.StartAngle = 90;
KaxChart1.Series[0].Appearance.DiameterScale = 0.6;
KaxChart1.Series[0].Appearance.ShowLabelConnectors = true;
KaxChart1.Series[0].Appearance.ExplodePercent = 30;
KaxChart1.Series[0].Appearance.CenterXOffset = 5;
KaxChart1.Series[0].Appearance.CenterYOffset = 5;

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