Chart Ticks guide for ASP.NET AJAX, C#, VB.NET, rich aspx sample code for major and minor tick's porperties and layout

Chart Ticks in ASP.NET AJAX

Home > How to > Chart Tick

Major Ticks and Minor Ticks

The Chart Library of KT.UI ASP.NET AJAX SDK provides a wide variety of chart elements building and modification tools, which allow users to construct mostly used chart elements and define them based on actual needs. This page demonstrates how to create simple chart ticks marks to x axis and y axis by using ASP.NET demo methods and codes to show the positions of item and the starting points of gridlines.

Tick marks on chart can be divided into two categories, vertical ticks and horizontal ticks, vertical ticks are displayed and controlled on x axis and horizontal ticks are marked and controlled by y aisx. Besides, according to the ticks' size, the ticks can be major ticks and minor ticks to display axes step values. With the help of chart ticks, users can view and read the chart more clearly.

Ticks Properties

Like other elements have propertes setting options, KT.UI ASP.NET AJAX Chart components also offers rich chart ticks definition and feature tools. For instance, we provide the chart ticks visibility control to let users choose display or hide ticks; the ticks cap options to set ticks terminators' shape; color tool for changing ticks lines and caps; length item for setting ticks in pixels and PenStyle for ticks values as well as ticks width in pixels. You can read following instructions for all ticks' attributes to get detailed information.

Major and minor tick objects include the following properties:

Cap: ticks caps include StartCap and EndCap. Both ticks caps can be in these shape types: Flat, Square, Round, Triangle, NoAnchor, SquareAnchor, DiamondAnchor, ArrowAnchor, AnchorMask or Custom.
Length: the unit for ticks' length is pixels. We can reverse the direction of ticks and let them show negative value for length.
Width: the ticks' width is also in pixels unit.
PenStyle: this object can decide the ticks' filled color mode and the values can be Solid, Dash, Dot, DashDot, DashDotDot and Custom.
Color: using this property to set the ticks' lines and caps color based on your own needs.

Following ASP.NET sample codes are for all the ticks' properties. You can directly copy and paste them into your chart project to realize the ticks' customizations.


<AxisY MaxValue="5" Step="0.5" AxisMode="extended">
     <StyleSet MajorTick-Visible="true" 
MajorTick-StartCap="Round" 
MajorTick-EndCap="Triangle" 
MajorTick-Length="3" 
MajorTick-PenStyle="Solid" 
MajorTick-Color="Red" 
MajorTick-Width="2" 
MinorTick-Visible="true" 
MinorTick-StartCap="Flat" 
MinorTick-EndCap="Flat" 
MinorTick-Length="2" 
MinorTick-PenStyle="Dot"
 MinorTick-Color="OrangeRed" 
MinorTick-Width="1">
</StyleSet>
</YAxis>

Layout

The layout modes of chart can be used to for chart appearance while the underlying data remains the same. The available LayoutMode values of KT.UI ASP.NET Chart library are Normal, Inside and Between.

Demo codes below show how to set chart layout mode in between form within ASP.NET application.


<AxisX LayoutMode="Between" MaxValue="5" MinValue="1" Step="1">
                           <StyleSet MajorTick-Visible="true" ></ StyleSet >
                        </AxisX>

Major Ticks and Minor Ticks

Ticks Properties

Layout

See Also