Tick Marks
Tick marks, an element of gauges in FusionChart Suite XT, are calibration marks on the scale to help interpret readings. There are two types of tick marks:
Major Tick Marks – The bigger lines on the radial scale
Minor Tick Marks – The smaller lines interspersed within the major tick marks
An LED gauge with major and minor tick marks looks like this:
Show/Hide Tick Marks
By default, the tick marks are displayed. To hide the tick marks set the showTickMarks
attribute to 1
. Refer to the code below:
{
"chart": {
"showTickMarks": "0"
}
}
An LED gauge will look like as shown below:
Click here to edit the above chart.
Show/Hide the Tick Values
By default, the tick values are displayed. To hide the tick values set the showTickValues
attribute to 1
. Refer to the code below:
{
"chart": {
"showTickValues": "0"
}
}
An LED gauge will look like as shown below:
Click here to edit the above chart.
You can also opt to hide the upper and lower limits of the gauge. To do so, set the showLimits
attribute to 0
.
Refer to the code below:
{
"chart": {
"showLimits": "0"
}
}
An LED gauge will look like as shown below:
Click here to edit the above chart.
Configure the Tick Value Position
By default, tick marks and tick values are placed outside a gauge. In vertical gauges (like the vertical LED gauge), they are placed to the right of the gauge by default. Similarly, in horizontal gauges (like the horizontal LED gauge), they are placed below the gauge.
To customize the position of tick marks and tick values use the following attributes:
Set the
placeTicksInside
to1
to view the tick marks inside the gauge.Set the
placeValuesInside
to1
to view the tick values inside the gauge.
Refer to the code below:
{
"chart": {
"placeTicksInside": "1",
"placeValuesInside": "1"
}
}
An angular gauge will look like as shown below:
Click here to edit the above chart.
Tick Value Position of Horizontal Gauges
To customize the position of tick marks and tick values of a horizontal use the following attributes:
- Set the
ticksBelowGauge
to0
to view the tick marks above the gauge.
Refer to the code below:
{
"chart": {
"ticksBelowGauge": "0"
}
}
A horizontal gauge will look like as shown below:
Click here to edit the above chart.
Tick Value Position of Vertical Gauges
To customize the position of tick marks and tick values of a vertical gauge use the following attributes:
- Set the
ticksOnRight
to0
to view the tick marks at the left of the gauge. In case of the vertical gauge, the tick marks get rendered above the gauge.
Refer to the code below:
{
"chart": {
"ticksOnRight": "0"
}
}
A vertical gauge will look like as shown below:
Click here to edit the above chart.
Display every nth Tick Mark Value
FusionCharts allows you to show every n-th value, where the upper and lower limit of the scale is always displayed.
To do so, specify the n-th tick value using the tickValueStep
attribute.
Refer to the code below:
{
"chart": {
"tickValueStep": "2"
}
}
A horizontal LED gauge displaying n-th value looks as below:
Click here to edit the above chart.
Show Tick Values in Decimals
You can configure the number of decimals and can also force the number of decimals on tick values.
To do so, the following attributes are used:
Specify the number of decimals to which tick values will be rounded to using the
tickValuDecimals
attribute.Set the
forceTickValueDecimals
attribute to1
to force the number of decimals on tick values.
Refer to the code below:
{
"chart": {
"tickValueDecimals": "3",
"forceTickValueDecimals":"1"
}
}
The chart will look like as shown below:
Click here to edit the above chart.
Configure Tick Mark and Tick Value Padding
By defining the padding for tick mark and tick value, you can control the amount of space between the tick mark and the gauge, or between the tick values and tick marks.
To do so, use the following attributes:
Set the distance (in pixels) between the gauge and the tick marks using the
tickMarkDistance
attribute.Set the distance (in pixels) between the tick values and marks fusion using the
tickValueDistance
attribute.
Refer to the code below:
{
"chart": {
"tickMarkDistance": "10",
"tickValueDistance": "10"
}
}
A horizontal LED gauge will look like as shown below:
Click here to edit the above chart.
Set the Number of Major and Minor Tick Marks
By default, the number of major and minor ticks are automatically adjusted. You can opt to define the number of major and minor chart tick to be rendered on a gauge. To do so, the following attributes are used:
Set the
adjustTM
attribute to '0' to disable the automatic adjustment of the tick marks.Specify the number of major tick marks using the
majorTMNumber
attribute.Specify the number of minor tick marks using the
minorTMNumber
attribute.
Refer to the code below:
{
"chart": {
"adjustTM": "0",
"majorTMNumber": "11",
"minorTMNumber": "4"
}
}
A horizontal LED gauge will look like as shown below:
Click here to edit the above chart.
Configure Visuals of Tick Marks
You can configure the color, transparency, height, and thickness of both, major and minor marks fusion.
To do so, use the following attributes:
Specify the hex code for the major ticks color using the
majorTMColor
attribute.Specify the hex code for the minor ticks color using the
minorTMColor
attribute.Set the transparency of the major ticks using the
majorTMAlpha
attribute.Set the transparency of the minor ticks using the
minorTMAlpha
attribute.Set the height of the major ticks using the
majorTMHeight
attribute.Set the height of the minor ticks using the
minorTMHeight
attribute.Set the thickness of the major ticks using the
majorTMThickness
attribute.Set the thickness of the minor ticks using the
minorTMThickness
attribute.
Refer to the code below:
{
"chart": {
"majorTMColor": "#666666",
"majorTMAlpha": "70",
"majorTMHeight": "10",
"majorTMThickness": "2",
"minorTMColor": "#cccccc",
"minorTMAlpha": "100",
"minorTMHeight": "6",
"minorTMThickness": "1"
}
}
A horizontal LED gauge will look like as shown below:
Click here to edit the above chart.
Conclusion
FusionCharts empowers you to create highly customized LED gauges with precise control over tick marks. You can choose to show or hide them, position them strategically, display specific values, set decimal precision, adjust spacing, define the number of major and minor chart tick, and even customize their color, transparency, size, and thickness – all in one go. This granular control ensures your gauges are not only functional but also visually aligned with your design and data presentation requirements.
FAQs
What are tick marks in FusionCharts gauges?
Tick marks are calibration lines on the gauge scale that help interpret readings. There are two types: major tick marks (bigger lines) and minor tick marks (smaller lines interspersed within the major ones).
Can I place tick marks and values inside the gauge?
Yes, you can place tick marks inside the gauge by setting the placeTicksInside
attribute to 1 and tick values inside by setting the placeValuesInside
attribute to 1.
How do I position tick marks and values for horizontal and vertical gauges?
For horizontal gauges, set ticksBelowGauge
to 0 to place tick marks above the gauge. For vertical gauges, set ticksOnRight
to 0 to place tick marks to the left of the gauge.
How do I set the number of decimal places for tick values?
Use the tickValueDecimals
attribute to specify the number of decimal places and the forceTickValueDecimals
attribute set to 1 to enforce this.