Tick marks, an element of gauges in FusionChart Suite XT, are calibration marks on the scale to help interpret readings on a gauge. There are two types of tick marks that can be drawn on the chart:
Major Tick Marks – These are the bigger lines on the radial scale
Minor Tick Marks – These are the smaller lines interspersed within the major tick marks
A LED gauge with major and minor tick marks looks like this:
This section talks about:
Showing or hiding tick marks and tick values
Configuring tick value position
Showing every nth tick mark value
Showing tick values in decimals
Configuring tick mark and tick value padding
Configuring the number of major and minor tick marks
Configuring cosmetics of tick marks
Showing/hiding tick marks and tick values
A LED gauge with tick marks and tick values hidden looks as below:
The following attributes can be used to show/hide tick marks and tick values:
| Attribute | Description |
|---|---|
showTickMarks |
Set this to to 0, to hide tick marks on a gauge. By default, tick marks are visible with the value set to 1. |
showTickValues |
Set this to 0, to hide data values corresponding to the tick marks. By default this is set to 1, with the tick values being visible. |
showLimits |
Set this to 1 (default) to show the upper and lower limits of the gauge or to0 to hide them. |
The data structure used to hide tick marks and tick values is given below:
Configuring the tick value position
By default, tick marks and tick values are placed outside a gauge. In vertical gauges (like the vertical LED gauge), by default, they are placed to the right of the gauge. Similarly, in horizontal gauges (like the horizontal LED gauge), they are placed below the gauge. FusionCharts Suite XT allows you to customize the placement of tick marks and tick values.
An angular gauge with tick marks and tick values placed inside looks as below:
Following is the list of attributes for configuring tick mark position and tick values:
| Attribute | Description |
|---|---|
placeTicksInside |
Set this to 1 to place the tick marks inside the gauge. Set it to 0 (default) otherwise. |
placeValuesInside |
Set this to 1 to place the tick values inside the gauge. Set it to 0 (default) otherwise. |
The data structure needed to place tick marks and tick values inside an angular gauge is given below:
A linear gauge with tick marks and tick values placed above looks as below:
Given below is the attribute used to configure tick mark position and tick values for a horizontal gauge.
| Attribute | Description |
|---|---|
ticksBelowGauge |
Set this to 1 (default) to place the ticks at the bottom of the horizontal gauge. Set it to 0 to place them on the top. |
The data structure needed to place tick marks and tick values at the top of a horizontal gauge is given below:
Similarly for a vertical gauge, tick marks and tick values can be placed on the right or left. Given below is the attribute used to configure the position of tick marks and tick values for a vertical gauge:
| Attribute | Description |
|---|---|
ticksOnRight |
Set this to 1 (default) to place the ticks to the right of the vertical gauge. Set it to 0 to place them on the left. |
Configuring the number of major and minor tick marks
FusionCharts Suite XT allows to you to define the number of major and minor tick marks to be rendered on a gauge. A horizontal LED gauge with the number of tick marks manually configured looks as below:
Given below is a list of attributes used to configure the number of tick marks:
| Attribute | Description |
|---|---|
adjustTM |
If set to 0, it disables automatic adjustment of tick marks by the chart. By default, the chart automatically adjusts the number of major ticks to a best feasible value. |
majorTMNumber and minorTMNumber |
They specify the number of major and minor tick marks, respectively, to be rendered on the gauge. Accepts a non-negative integer. |
The data structure needed to configure the number of tick marks is given below:
Configuring cosmetic properties of tick marks
You can configure the color, transparency, height, and thickness of both, major and minor tick marks. A horizontal LED gauge with customized tick marks looks as below:
Given below is the list of attributes used to configure cosmetic properties of tick marks:
| Attribute | Description |
|---|---|
majorTMColor and minorTMColor |
They specify the hex code of the color, e.g #00ffaa, that will be used to render the major and minor tick marks, respectively. |
majorTMAlpha and minorTMAlpha |
They specify the transparency of the major and minor tick marks, respectively, with values from 0 (transparent) to 100 (opaque). |
majorTMHeight and minorTMHeight |
They specify the height of the major and minor tick marks in pixels, respectively. |
majorTMThickness and minorTMThickness |
They specify the thickness of the major and minor tick marks in pixels, respectively. |
The data structure needed to customize tick marks is given below: