Numeric axis in TypeScript Chart control
18 Nov 20181 minute to read
The numeric axis is used to represent numeric values in a chart. By default, the valueType of an axis is set to Double, which is suitable for displaying continuous numerical data.
Range
The range of the axis is calculated automatically based on the provided data. You can also customize the visible range by using the minimum, maximum, and interval properties of the axis.
Range Padding
Padding can be applied to the minimum and maximum values of the axis range by using the rangePadding property. The numeric axis supports the following padding options:
- None
- Round
- Additional
- Normal
- Auto
Numeric - None
When the rangePadding property is set to None, the minimum and maximum values of the axis are derived directly from the data.
Numeric - Round
When the rangePadding property is set to Round, the minimum and maximum values are rounded to the nearest values divisible by the interval. For example, if the minimum value is 3.5 and the interval is 1, the minimum value is rounded to 3.
Numeric - Additional
When the rangePadding property is set to Additional, one interval is added to both the minimum and maximum values of the axis range.
Numeric - Normal
When the rangePadding property is set to Normal, padding is applied to the axis based on the default range calculation.
Numeric - Auto
When the rangePadding property is set to Auto, the horizontal numeric axis uses None as padding, while the vertical numeric axis uses Normal padding.
Label Format
Numeric Label Format
Numeric axis labels can be formatted by using the labelFormat property. This property supports all Globalize numeric formats.
The following table shows examples of commonly used numeric label formats and their corresponding outputs.
| Label Value | Label Format | Result | Description |
| 1000 | n1 | 1000.0 | Rounded to 1 decimal place |
| 1000 | n2 | 1000.00 | Rounded to 2 decimal places |
| 1000 | n3 | 1000.000 | Rounded to 3 decimal places |
| 0.01 | p1 | 1.0% | Converted to percentage with 1 decimal place |
| 0.01 | p2 | 1.00% | Converted to percentage with 2 decimal places |
| 0.01 | p3 | 1.000% | Converted to percentage with 3 decimal places |
| 1000 | c1 | $1000.0 | Currency format with 1 decimal place |
| 1000 | c2 | $1000.00 | Currency format with 2 decimal places |
GroupingSeparator
To separate groups of thousands in numeric labels, enable the useGroupingSeparator property in the chart.
Custom Label Format
The numeric axis also supports custom label formats by using placeholders such as {value}°C, where {value} represents the numeric axis label. For example, the value 20 is displayed as 20°C.