Axis in TypeScript Chart control
18 Nov 20187 minutes to read
Chart typically has two axis, which are used to measure and categorize data: a horizontal or primary x axis and a vertical or primary y axis.
Vertical axis supports numerical and logarithmic scale. Horizontal axis supports the following types of scale.
- Category
- Numeric
- DateTime
- Logarithmic
In addition to this, both vertical and horizontal axis support inversed axis.
Category Axis
Category axis are used to represent, the string values instead of numbers.
Positioning Axis Labels
By default, category labels are placed between the ticks in an axis, this can also be placed on ticks using labelPlacement property.
Note: To use category axis, we need to inject
Categorymodule usingChart.Inject(Category)method and set thevalueTypeof axis to Category.
Numeric Axis
You can use numeric axis to represent numeric values of data in chart. By default, the valueType of an axis is Double.
Customize Numeric Range
Range of an axis, will be calculated automatically based on the provided data, you can also customize the range of the axis using minimum, maximum and interval property of
the axis.
Apply Padding to the Range
Padding can be applied to the minimum and maximum extremes of an axis range by using the rangePadding property. Numeric axis supports the following types of padding.
- None
- Round
- Additional
- Normal
- Auto
Numeric - None
When the rangePadding is set to None, minimum and maximum of the axis is based on the data.
Numeric - Round
When the rangePadding is set to Round, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is 3.5 and the interval is 1, then the minimum will be rounded to 3.
Numeric - Additional
When the rangePadding is set to Additional, interval of an axis will be padded to the minimum and maximum of the axis.
Numeric - Normal
When the rangePadding is set to Normal, padding is applied to the axis based on default range calculation.
Numeric - Auto
When the rangePadding is set to Auto, horizontal numeric axis takes None as padding calculation, while the vertical numeric axis takes Normal as padding calculation.
DateTime Axis
Date time axis uses date time scale and displays the date time values as axis labels in the specified format.
Customizing Date Time Range
Range of an axis will be calculated automatically based on the provided data, you can also customize the range of the axis using minimum, maximum and interval property of the axis.
Date Time Intervals
Date time intervals can be customized by using the interval and intervalType properties of the axis. For example, when you set interval as 2 and intervalType as years, it considers 2 years as interval.
Datetime axis supports following interval types,
- Auto
- Years
- Months
- Days
- Hours
- Minutes
- Seconds
Applying Padding to the Range
Padding can be applied to the minimum and maximum extremes of the range by using the rangePadding property. Date time axis supports the following types of padding,
- None
- Round
- Additional
Datetime - None
When the rangePadding is set to None, minimum and maximum of an axis is based on the data.
Datetime - Round
When the rangePadding is set to Round, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is 15th Jan, interval is 1 and the interval type is ‘month’, then the axis minimum will be Jan 1st.
Datetime - Additional
When the rangePadding is set to Additional, interval of an axis will be padded to the minimum and maximum of the axis.
Note: To use datetime axis, we need to inject DateTime using
Chart.Inject(DateTime)method and set thevalueTypeof axis to DateTime.
Logarithmic Axis
Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106).
Customize Logarithmic Range
Range of an axis, will be calculated automatically based on the provided data, you can also customize the range of an axis using minimum,maximum and interval property of the axis.
Logarithmic Base
Logarithmic base can be customized by using the logBase property of the axis. For example when the logBase is 5, the axis values follows 5-2, 5-1, 50, 51, 52 etc.
Logarithmic Interval
Logarithmic axis interval can be customized by using the interval property of the axis. When the logarithmic base is 10 and logarithmic interval is 2, then the axis labels are placed at an interval of 102. The default value of the interval is 1.
Note: To use log axis, we need to inject
Logarithmicusing methodChart.Inject(Logarithmic)and set thevalueTypeof axis toLogarithmic.
Inversed Axis
When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner set this property isInversed to true.
Label Format
Numeric Label Format
Numeric labels can be formatted by using the labelFormat property. Numeric labels supports all globalize format.
The following table describes the result of applying some commonly used label formats on numeric values.
| Label Value | Label Format property value | Result | Description |
| 1000 | n1 | 1000.0 | The Number is rounded to 1 decimal place |
| 1000 | n2 | 1000.00 | The Number is rounded to 2 decimal place |
| 1000 | n3 | 1000.000 | The Number is rounded to 3 decimal place |
| 0.01 | p1 | 1.0% | The Number is converted to percentage with 1 decimal place |
| 0.01 | p2 | 1.00% | The Number is converted to percentage with 2 decimal place |
| 0.01 | p3 | 1.000% | The Number is converted to percentage with 3 decimal place |
| 1000 | c1 | $1,000.0 | The Currency symbol is appended to number and number is rounded to 1 decimal place |
| 1000 | c2 | $1,000.00 | The Currency symbol is appended to number and number is rounded to 2 decimal place |
DateTime Label Format
You can format and parse the date to all globalize format using labelFormat property in an axis.
The following table describes the result of applying some common date time formats to the labelFormat property
| Label Value | Label Format Property Value | Result | Description |
| new Date(2000, 03, 10) | EEEE | Monday | The Date is displayed in day format |
| new Date(2000, 03, 10) | yMd | 04/10/2000 | The Date is displayed in month/date/year format |
| new Date(2000, 03, 10) | MMM | Apr | The Shorthand month for the date is displayed |
| new Date(2000, 03, 10) | hm | 12:00 AM | Time of the date value is displayed as label |
| new Date(2000, 03, 10) | hms | 12:00:00 AM | The Label is displayed in hours:minutes:seconds format |
Custom Label Format
Axis also supports custom label format using placeholder like {value}°C, in which the value represent the axis label e.g 20°C.
Common Axis Features
Axis Title
You can add a title to the axis using title property to provide quick information to the user about the data plotted in the axis.
Label Customization
The labelStyle property of an axis provides options to customize the color, font-family, font-size and font-weight of the axis labels.
Edge Label Placement
Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use edgeLabelPlacement property in axis, which moves the label inside the chart area for better appearance or hides it.
Grid Lines Customization
You can customize the width, color and dashArray of the minor and major grid lines, using majorGridLines and minorGridLines properties in the axis.
Tick Lines Customization
You can customize the width, color and size of the minor and major tick lines, using majorTickLines and minorTickLines properties in the axis.
Place Axes at the Opposite Side
To place an axis opposite from its original position, set opposedPosition property of the axis to true.
Multiple Axis
In addition to primary X and Y axis, we can add n number of axis to the chart. Series can be associated with this axis, by mapping with axis’s unique name.
Smart Axis Labels
When the axis labels overlap with each other, you can use labelIntersectAction property in the axis, to place them smartly.
When setting labelIntersectAction as Hide
When setting labelIntersectAction as Rotate45
When setting labelIntersectAction as Rotate90
Strip lines
EJ2 chart supports horizontal and vertical strip lines and customization of stripline in both orientation.To use strip line in axis, we need to inject StripLine module using Chart.Inject(StripLine) method
Horizontal Strip lines
You can create Horizontal stripline by adding the stripline in the vertical axis and set visible option to true.
Striplines are rendered in the specified start to end range and you can add more than one stripline for an axis.
Vertical Striplines
You can create vertical stripline by adding the stripline in the horizontal axis and set visible option to true.
Striplines are rendered in the specified start to end range and you can add more than one stripline for an axis.
Customize the strip line
Starting value in specific strip line can be customized by start property in strip line. Similarly, ending value is customized by end. It can be also set for starting from the corresponding origin of the axis by
startFromOrigin. Size of the strip line is customized by size. Border for the stripline is customized by border. Order of the strip line such that whether it should be rendered in behind or over the series elements
is customized by zIndex.
Customize the stripline text
You can customize the text rendered in stripline by textStyle property. Rotation of the strip line text can be changed by rotation property.
Horizontal and Vertical alignment of stripline text can be changed by horizontalAlignment and verticalAlignment property.