Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

Showing/Hiding Tick Marks and Tick Values

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

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-1',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "20",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        }
    },
    events: {
        'beforeRender': function(event, args) {
            // creating div for controllers
            var controllers = document.createElement('div'),
                gaugeRef = event.sender;

            controllers.setAttribute('id', 'controllers');

            // Create checkbox inside div
            controllers.innerHTML = '<input type="checkbox" id="tmCB" checked >Show Tick Mark?</input><br><input type="checkbox" id="tvCB" checked >Show Tick Value?</input>';

            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);

            // setting css styles for controllers div
            controllers.style.cssText = "margin-top: 10px;width: 400px;text-align: center;";

            var tickmarkCB = document.getElementById('tmCB'),
                tickvalueCB = document.getElementById('tvCB'),

                //Function to show/hide tick mark
                showTickMark = function(evt, obj) {
                    //Using showTickMarks attribute to show/hide ticks
                    (evt.currentTarget.checked) ? gaugeRef.setChartAttribute('showTickMarks', 1) :
                        gaugeRef.setChartAttribute('showTickMarks', 0);

                },

                //Function to show/hide tick value
                showTickValue = function(evt, obj) {
                    //Using showTickValues attribute to show/hide tick value
                    (evt.currentTarget.checked) ? gaugeRef.setChartAttribute('showTickValues', 1) :
                        gaugeRef.setChartAttribute('showTickValues', 0);
                }

            //Set event listener for check boxes
            tickmarkCB.addEventListener && tickmarkCB.addEventListener("click", showTickMark);
            tickvalueCB.addEventListener && tickvalueCB.addEventListener("click", showTickValue);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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 clear it, they will be hidden. Similarly, you can select/clear 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.

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 will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "majorTMNumber": "10", "tickValueStep": "2", "tickValueDecimals": "1", "forceTickValueDecimals": "1", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "majorTMNumber": "10",
        "tickValueStep": "2",
        "tickValueDecimals": "1",
        "forceTickValueDecimals": "1",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-2',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "20",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "majorTMNumber": "10",
            //To show every nth major tick mark's value being shown
            "tickValueStep": "2",
            //set the decimals for the tick values
            "tickValueDecimals": "1",
            //Forcing to display decimals
            "forceTickValueDecimals": "1",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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, 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.

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 will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "ticksBelowGauge": "0", "placeTicksInside": "0", "placeValuesInside": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "ticksBelowGauge": "0",
        "placeTicksInside": "0",
        "placeValuesInside": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-3',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "20",
            "valueFontSize": "11",
            "valueFontBold": "0",
            //Placing the tick above/below the gauge
            "ticksBelowGauge": "0",
            //Placing the ticks outside of the gauge
            "placeTicksInside": "0",
            //Placing the tick values outside of the gauge
            "placeValuesInside": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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 values will be placed inside the gauge or outside it. Setting this attribute to 1 will place the tick values inside the gauge, setting it to 0 (default) will place them outside.

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 will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "majorTMNumber": "9", "minorTMNumber": "5", "adjustTM": "1", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "majorTMNumber": "9",
        "minorTMNumber": "5",
        "adjustTM": "1",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-4',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "20",
            "valueFontSize": "11",
            "valueFontBold": "0",
            //To set the number of major tickmarks
            "majorTMNumber": "9",
            //To set the number of minor tick marks
            //in between major tick marks
            "minorTMNumber": "5",
            //To adjust the tickmark and values automatically
            //to a best feasible value
            "adjustTM": "1",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        }
    },
    events: {
        'beforeRender': function(event, args) {
            // creating div for controllers
            var controllers = document.createElement('div'),
                gaugeRef = event.sender;


            controllers.setAttribute('id', 'controllers');
            // Create radio buttons inside div
            controllers.innerHTML = '<label><input type="checkbox" id="tMarkCB" checked />Adjust Tickmark? </label>';

            // set css style for controllers div
            controllers.style.cssText = 'position:inherit;text-align: center;';

            // set css styles for "label" elements in controllers div
            var labels = controllers.getElementsByTagName('label');
            for (var i = 0; i < labels.length; i++) {
                labels[i].style.cssText = 'padding: 0 5px;';
            }

            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);

            var adjustTickCB = document.getElementById('tMarkCB'),
                //Function to show/hide labels
                adjustTicks = function(evt, obj) {
                    //Using adjustTM attribute to adjust the
                    //number of major ticks to a best feasible value
                    if (evt.currentTarget.checked) {
                        gaugeRef.setChartAttribute('adjustTM', 1);
                    } else {
                        gaugeRef.setChartAttribute('adjustTM', 0);
                    }
                };

            //Set event listener for check boxes
            adjustTickCB.addEventListener && adjustTickCB.addEventListener("click", adjustTicks);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Configuring Cosmetics for Tick Marks

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

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "minorTMNumber": "4", "majorTMColor": "#163143", "majorTMAlpha": "50", "majorTMHeight": "7", "majorTMThickness": "2", "minorTMColor": "#163143", "minorTMAlpha": "30", "minorTMHeight": "4", "minorTMThickness": "1", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "minorTMNumber": "4",
        "majorTMColor": "#163143",
        "majorTMAlpha": "50",
        "majorTMHeight": "7",
        "majorTMThickness": "2",
        "minorTMColor": "#163143",
        "minorTMAlpha": "30",
        "minorTMHeight": "4",
        "minorTMThickness": "1",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-5',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "20",
            "valueFontSize": "11",
            "valueFontBold": "0",
            //Tick mark cosmetics
            "minorTMNumber": "4",
            "majorTMColor": "#163143",
            "majorTMAlpha": "50",
            "majorTMHeight": "7",
            "majorTMThickness": "2",
            "minorTMColor": "#163143",
            "minorTMAlpha": "30",
            "minorTMHeight": "4",
            "minorTMThickness": "1",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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. This attribute takes values between 0 (transparent) and 100 (opaque), 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. This attribute takes values between 0 (transparent) and 100 (opaque), 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.

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 will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "tickMarkDistance": "5", "tickValueDistance": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "tickMarkDistance": "5",
        "tickValueDistance": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-6',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "20",
            "valueFontSize": "11",
            "valueFontBold": "0",
            //Setting the tick mark distance from gauge
            "tickMarkDistance": "5",
            //Setting the tick value distance from tick mark
            "tickValueDistance": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Top