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 the tick marks and tick values

  • Place tick marks and tick values inside the gauge

  • Configure the number of major and minor tick marks

  • Configure tick mark cosmetics

  • Configure tick values

  • Set the tick value distance

Showing/Hiding Tick Marks and Tick Values

An angular gauge rendered with the tick marks and tick values hidden looks like this:

FusionCharts should load here..

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

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

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

...

Placing Tick Marks and Tick Values Inside the Gauge

By default, the tick marks and tick values are rendered outside the gauge scale. However, you can configure them to be placed inside the gauge.

An angular gauge rendered with the tick marks and tick values placed inside looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to place the tick marks and tick values inside the gauge:

Attribute Name Description
placeTicksInside It is used to specify whether the tick marks should be placed inside (on the inner radius) or outside (on the outer radius) the gauge. Setting this attribute to 1 places the tick marks inside the gauge, setting it to 0 (default) places them outside.
placeValuesInside It is used to specify whether the tick values should be placed inside or outside the gauge. Setting this attribute to 1 places the tick values inside the gauge, setting it to 0 (default) places them outside.

The data structure needed to place tick marks and tick values inside the gauge is given below:

...

Configuring the Number of Major and Minor Tick Marks

Based on the data you provide, the gauge automatically decides the number of major and minor tick marks to render. However, you can explicitly specify the number of major and minor tick marks.

An angular gauge with the number of major and minor tick marks explicitly set to 12 and 4, respectively, looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to explicitly set the number of major and minor tick marks:

Attribute Name Description
majorTMNumber It is used to specify the number of major tick marks to be rendered on the gauge scale.
minorTMNumber It is used to specify the number of minor tick marks to be rendered on the gauge scale.

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

...

Configuring Cosmetics for Major and Minor Tick Marks

You can customize the appearance of the major and minor tick marks for their color, transparency, height, and thickness.

An angular gauge rendered with the cosmetics for major and minor tick marks configured looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the cosmetics for major and minor tick marks:

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 cosmetics for the major and minor tick marks is given below:

...

Configuring Tick Values

Showing Every nth Tick Value

You can opt to show only every nth tick value on the angular gauge scale.

An angular gauge configured to show only every alternate tick value looks like this:

FusionCharts should load here..

Given below is a brief description of the attribute used to show only every nth tick value:

Attribute Name Description
tickValueStep Set this to a whole number N to display every Nth tick mark and hide all intervening tick marks.

The data structure needed to render only every nth tick value is given below:

...

Setting Decimals for Tick Values

You can also show decimal numbers as tick values. For these decimal numbers, you can configure how many digits will be rendered after the decimal point and whether digits will be forced after the decimal point.

An angular gauge configured to render one digit after the decimal point and force decimals looks like this:

FusionCharts should load here..

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

Attribute Name Description
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 decimals for tick values is given below:

...

Setting Tick Value Distance

An angular gauge rendered with a distance of 25 pixels between the tick marks and values looks like this:

FusionCharts should load here..

Given below is a brief description of the attribute used to set the tick value distance:

Attribute Name Description
tickValueDistance It is used to specify the distance, in pixels, between tick marks and their corresponding values.
manageValueOverLapping It is used to specify whether overlapping of tick values and trend values will be eliminated. Setting this attribute to 1 enables automatic management of overlapping values, setting it to 0 disables it.
autoAlignTickValues It is used to specify whether the gauge will automatically place tick values to reduce overlapping of the tick values with the gauge. Setting this attribute to 1 enables the automatic alignment, setting it to 0 disables it.

The data structure needed to set the tick value distance is given below:

...

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