$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
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;
When the chart types are Gantt and Bubble, we can set YVlaue and YVlaue2.
ChartSeriesItem item = newChartSeriesItem();
item.YValue = 4;
item.YValue2 = 5;
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;

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;


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;