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

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

FusionCharts will load here..
{ "chart": { "caption": "Average Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "showTickMarks": "0", "showTickValues": "0", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67" } ] } }
{
    "chart": {
        "caption": "Average Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "showTickMarks": "0",
        "showTickValues": "0",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "showTickMarks": "0",
            "showTickValues": "0",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67"
            }]
        }
    }
}
);
    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 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.

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 will load here..
{ "chart": { "caption": "Average Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "placeTicksInside": "1", "placeValuesInside": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67" } ] } }
{
    "chart": {
        "caption": "Average Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "placeTicksInside": "1",
        "placeValuesInside": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "placeTicksInside": "1",
            "placeValuesInside": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67"
            }]
        }
    }
}
);
    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 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.

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 will load here..
{ "chart": { "caption": "Average Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "majorTMNumber": "9", "minorTMNumber": "4", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67" } ] } }
{
    "chart": {
        "caption": "Average Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "majorTMNumber": "9",
        "minorTMNumber": "4",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "majorTMNumber": "9",
            "minorTMNumber": "4",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67"
            }]
        }
    }
}
);
    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 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.

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 will load here..
{ "chart": { "caption": "Average Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "majorTMNumber": "10", "majorTMColor": "#333333", "majorTMAlpha": "100", "majorTMHeight": "15", "majorTMThickness": "2", "minorTMNumber": "4", "minorTMColor": "#666666", "minorTMAlpha": "100", "minorTMHeight": "12", "minorTMThickness": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67" } ] } }
{
    "chart": {
        "caption": "Average Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "majorTMNumber": "10",
        "majorTMColor": "#333333",
        "majorTMAlpha": "100",
        "majorTMHeight": "15",
        "majorTMThickness": "2",
        "minorTMNumber": "4",
        "minorTMColor": "#666666",
        "minorTMAlpha": "100",
        "minorTMHeight": "12",
        "minorTMThickness": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "majorTMNumber": "10",
            "majorTMColor": "#333333",
            "majorTMAlpha": "100",
            "majorTMHeight": "15",
            "majorTMThickness": "2",
            "minorTMNumber": "4",
            "minorTMColor": "#666666",
            "minorTMAlpha": "100",
            "minorTMHeight": "12",
            "minorTMThickness": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67"
            }]
        }
    }
}
);
    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 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.

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 will load here..
{ "chart": { "caption": "Average Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "tickValueStep": "2", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67" } ] } }
{
    "chart": {
        "caption": "Average Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "tickValueStep": "2",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "tickValueStep": "2",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67"
            }]
        }
    }
}
);
    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 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.

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 will load here..
{ "chart": { "caption": "Average Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "tickValueDecimals": "1", "forceTickValueDecimals": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67" } ] } }
{
    "chart": {
        "caption": "Average Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "tickValueDecimals": "1",
        "forceTickValueDecimals": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "tickValueDecimals": "1",
            "forceTickValueDecimals": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67"
            }]
        }
    }
}
);
    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 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.

Setting Tick Value Distance

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

FusionCharts will load here..
{ "chart": { "caption": "Average Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "tickValueDistance": "25", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67" } ] } }
{
    "chart": {
        "caption": "Average Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "tickValueDistance": "25",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "tickValueDistance": "25",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67"
            }]
        }
    }
}
);
    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 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.

Top