Configuring Tick Marks

FusionCharts Suite XT allows you to configure several functional and cosmetic properties for tick marks and tick values.

In this section, you will be shown how to:

  • Show/hide tick marks and tick values

  • Configure tick values

  • Configure the position of tick marks and values

  • Configure the number of major and minor tick marks

  • Configure tick mark cosmetics

  • Configure tick mark and tick value padding

Showing/Hiding Tick Marks and Tick Values

A linear gauge configured to show/hide tick marks and tick values looks like this:

FusionCharts should load here..

Look at the check boxes rendered below the gauge. If you select the Show Tick Mark? check box, the tick marks will be shown; if you deselect it, they will be hidden. Similarly, you can select/deselect the Show Tick Value? check box to show/hide tick values.

Given below is a brief description of the attributes used to show/hide tick marks and tick values:

Attribute Name Description
showTickMarks It is used to specify whether the tick marks will be shown or hidden on the gauge scale. Setting this attribute to 0 will hide the tick marks, setting it to 1 (default) will show them.
showTickValues It is used to specify whether the tick values will be shown or hidden on the gauge scale. Setting this attribute to 0 will hide the tick values, setting it to 1 (default) will show them.

The data structure needed to show/hide tick marks and tick values is given below:

...

Configuring Tick Values

When you have a large number of tick marks on the gauge scale, showing all tick values can make the gauge appear clumsy. To avoid this, you can opt to show every nth tick value on the gauge scale. You can also configure whether decimal values will be rendered as tick values and the number of digits that appear after the decimal point.

A linear gauge configured to render decimal tick values corresponding to every alternate tick mark looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure tick values:

Attribute Name Description
tickValueStep If you need to show only every n-th tick value only, this attribute is used to specify that value.
tickValueDecimals It is used to specify the number of digits that will be rendered after the decimal point, e.g. 2.
forceTickValueDecimals It is used to specify whether decimals will be forced on tick values. Setting this attribute to 1 will force decimals on tick values, setting it to 0 (default) will not force them.

The data structure needed to configure tick values is given below:

...

Configuring the Position of Tick Marks and Tick Values

By default, the tick marks are placed outside the gauge, below the gauge scale. The tick values are also rendered outside the gauge. You can, however, configure the position of tick marks and tick values based on your requirements.

A linear gauge configured to place tick marks and tick values inside the gauge, above the gauge scale, looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the positions of tick marks and tick values:

Attribute Name Description
ticksBelowGauge It is used to specify whether the tick marks will be rendered above or below the gauge. Setting this attribute to 0 will render the tick marks above the gauge, setting it to 1 (default) will place them below the gauge.
placeTicksInside It is used to specify whether the tick marks will be placed inside the gauge or outside it. Setting this attribute to 1 will place the tick marks inside the gauge, setting it to 0 (default) will place them outside.
placeValuesInside It is used to specify whether the tick marks will be placed inside the gauge or outside it. Setting this attribute to 1 will place the tick marks inside the gauge, setting it to 0 (default) will place them outside.

The data structure needed to configure the tick marks and values position is given below:

...

Configuring the Number of Major and Minor Tick Marks

By default, the gauge automatically decides the number of major and minor tick marks to be rendered based on the data you provide. However, you can explicitly specify the number of tick marks to be rendered.

A linear gauge with the number of major and minor tick marks explicitly set to 9 and 5, respectively, looks like this

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the number of tick marks:

Attribute Name Description
majorTMNumber It is used to specify the number of major tick marks to be rendered.
minorTMNumber It is used to specify the number of minor tick marks to be rendered.
adjustTM It is used to specify whether the number of major tick marks should be automatically adjusted to ensure better distribution of the chart scale. Setting this attribute to 0 disables automatic adjustment of tick marks, setting it to 1 (default) enables it.

The data structure needed to configure the number of major and minor tick marks is given below:

...

Configuring Cosmetics for Tick Marks

A linear gauge configured for the cosmetic properties of major and minor tick marks looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the tick marks’ cosmetics:

Attribute Name Description
majorTMColor It is used to specify the hex code of the color using which the major tick marks will be rendered on the gauge, e.g. #333333.
majorTMAlpha It is used to specify the transparency of the major tick marks, e.g. 100.
majorTMHeight It is used to specify the height of the major tick marks, e.g. 15.
majorTMThickness It is used to specify the thickness of the major tick marks, e.g. 2.
minorTMColor It is used to specify the hex code of the color using which the minor tick marks will be rendered on the gauge, e.g. #666666.
minorTMAlpha It is used to specify the transparency of the minor tick marks, e.g. 100.
minorTMHeight It is used to specify the height of the minor tick marks, e.g. 12.
minorTMThickness It is used to specify the thickness of the minor tick marks, e.g. 1.

The data structure needed to configure the cosmetic properties for major and minor tick marks is given below:

...

Configuring the Tick Mark and Tick Value Padding

By default, the gauge automatically decides the padding distance for tick marks and tick values. However, you can explicitly specify the padding distance.

A linear gauge configured for the tick mark and tick value padding looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the tick mark and tick value padding:

Attribute Name Description
tickMarkDistance It used to specify the distance, in pixels, between the gauge scale and the tick marks.
tickValueDistance It is used to specify the distance, in pixels, between the tick marks and their corresponding tick values.

The data structure needed to configure the padding is given below:

...

There! You have now seen how you can configure the functional and cosmetic properties of tick marks and tick values.