XAxis and YAxis

Chart Axes, which have been used in almost all chart types except pie chart, have two dimensions, XAxis and YAxis. In general, the YAxis is used to represent the data values and the XAxis is mainly for displaying data categories. And in the practical chart applications, a chart may have two YAxis.

Axis Elements

Typically, each axis has five elements, which are GridLine, Axis line, Axis label, Axis marks and Item label. And in following text, we will illustrate the settings of above mentioned axis elements one by one.

How to Set Gridline

To make the chart be better and easier viewed and understood, we will use some lines to form a grid. And those lines are called gridlines. In general, we can change the gridline style by changing the PenStyle, Color and Width using MajorGridLine and MinorGridLine. Following ASP.NET code will show you how to set the gridline of Axis.

<YAxis>
<Appearance MajorGridLines-Color="#009933" 
MajorGridLines-PenStyle="Solid" 
MajorGridLines-Width="3"
MajorGridLines-Visible="True" 
MinorGridLines-Color="#009933" 
MinorGridLines-PenStyle="Dot" 
MinorGridLines-Width="2" 
MinorGridLines-Visible="True">
</Appearance>
</YAxis>

And you can also set the gridline of chart using C# code. Please note, the all grid line is horizontal
without overlap.


            KaxChart1.Diagram.AxisY.StyleSet.MajorGridLines.PenStyle = System.Drawing.Drawing2D.DashStyle.Solid;
            KaxChart1.Diagram.AxisY.StyleSet.MajorGridLines.Color = System.Drawing.Color.LightGreen;
            KaxChart1.Diagram.AxisY.StyleSet.MajorGridLines.Width = 3;
            KaxChart1.Diagram.AxisY.StyleSet.MajorGridLines.Visible = true;

            KaxChart1.Diagram.AxisY.StyleSet.MinorGridLines.PenStyle = System.Drawing.Drawing2D.DashStyle.Dot;
            KaxChart1.Diagram.AxisY.StyleSet.MinorGridLines.Color = System.Drawing.Color.LightGreen;
            KaxChart1.Diagram.AxisY.StyleSet.MinorGridLines.Width = 2;
            KaxChart1.Diagram.AxisY.StyleSet.MinorGridLines.Visible = true;

How to Set Axis Line

The appearance of Axis line can be fully customized by changing its color and width. And axis line has both x and y orientations.

<XAxis StyleSet-Color="#FF0066" Appearance-Width="5">
</XAxis>

How to Set Axis Label

The axis label, a text string title, can be used to explain the meaning of the units that each axis represents. And users can re-set the Axis Label style by using Appearance and TextBlock properties.

Following ASP.NET codes are used to add a axis label, define its position and customize its rotating degree. Besides, you can also modify the axis title's text value, text font, size, alignment mode, text color, wrap style and so on.

Add a axis label. Sometimes like chart legend, display the axis category name to us.

<AxisLabel-TextArea-Text="XAxis Label Value">
</XAxis>

Define axis position. You can set the axis to the Bottom or Top.


<AxisX AxisLabel-TextArea-Text = "AxisX Label Value" AxisLabel-TextArea-StyleSet-Position-AlignedPosition = "BottomLeft"> 
</AxisX>

Customize axis rotating angle.


<AxisY  AxisLabel-StyleSet-RotationAngle="75">                            
</AxisY>

How to Set Axis Marks


<AxisX AxisLabel-Marker-Visible = "True" AxisLabel-Marker-StyleSet-Fill-FillType = "Solid" 
AxisLabel-Marker-StyleSet-Fill-PrimaryColor = "Red">                            
</AxisX>

How to Set Item Label

The MinValue and MaxValue properties are offered to help users define the minimum and maximum values that the data can be displayed. Besides, you can also add some rotation to created item label.


<AxisY MaxValue="5" MinValue="-5" Step="1" >                        
</AxisY>

You can also make rotation to axis item label.


<AxisY StyleSet-LabelStyleSet-RotationAngle="75">                            
</AxisY>

Unique YAxis and YAxis2 Properties

YAxis and YAxis2 are positioned at each side of the chart plot area. It means you can add double y axis to your web chart control with different categories. And you can set different value to dual axis, each column can be the same data format or not. In general, the scaling, spacing and values of YAxis and YAxis2 are the same. But you are free to set them to have different scale of measurements. Here we mainly talk about two properties that are specified for YAxis. One is AxisMode and the other is ScaleBreak. Look at this online demo to view YAxis and YAxis2 property.

AxisMode: The chart axes provide two axis modes for YAis, which are Normal (used as default) and Extended (provide buffer space above the maximum value).
ScaleBreak: By accessing this property, users can denote a break stripe between low and high data values. Using this feature, we are able to read data object with large amplitude more easily. Besides, we can also display several distinct ranges in the same chart area using this property. The number of breaks, the position of breaks and the appearance style of beaks are all self-defined. So there maybe multi breaks in multiple axis in your asp.net chart.