Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

The angular gauge chart in the FusionCharts Suite XT offers you a lot of configuration options that help you improve the visual representation of the gauge.

In this section, you will be shown how you can configure the:

  • Gauge gradient fill

  • Gauge borders

  • Gauge radius and inner radius

  • Pivot properties

Configuring the Gauge Gradient Fill

An angular gauge is usually rendered with solid colors filled in the background. To enhance the visual representation of charts, you can use a gradient fill for the background.

An angular gauge with the scale rendered using a gradient fill looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "gaugeFillMix": "{dark-30},{light-60},{dark-10}", "gaugeFillRatio": "15", "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
        "gaugeFillRatio": "15",
        "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: '250',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
            "gaugeFillRatio": "15",
            "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 gradient fill for the gauge:

Attribute Name Description

gaugeFillMix

It is used to specify the gradient fill formula for the gauge scale. The color constituents start applying from the inner side to the outer side of the scale, which means that the color specified first will be applied to the inner radius and the subsequent colors will move out towards the outer radius. Example: {light-10},{light-20},{light-60},{dark-30},{dark-40}, {dark-40}

gaugeFillRatio

It is used to specify the ratio in which each of the colors specified for the gradient fill will be applied to the gauge scale. If you set this attribute as empty, it instructs the gauge to automatically distribute the gradient color constituents. Example: 4

Configuring Gauge Borders

There are several ways in which you can configure the borders of an angular gauge scale. You can:

  • Show/hide the gauge border

  • Configure the border cosmetics

Showing/Hiding the Gauge Border

An angular gauge rendered with the gauge border hidden looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showGaugeBorder": "0", "showValue": "1", "valueBelowPivot": "1", "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showGaugeBorder": "0",
        "showValue": "1",
        "valueBelowPivot": "1",
        "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showGaugeBorder": "0",
            "showValue": "1",
            "valueBelowPivot": "1",
            "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/hide the gauge border:

Attribute Name Description

showGaugeBorder

It is used to specify whether the gauge border will be shown or hidden. Setting this attribute to 0 will hide the gauge border, setting it to 1 (default) will show the border.

On the above sample the shadow is hidden through the use of the fint theme. Shadows might interfere with the border color.

Configuring Border Cosmetics

Configuring Border Cosmetics for each Color Range

FusionCharts Suite XT allows you to individually configure the color and transparency of the border of each range on the gauge scale.

An angular gauge with the border cosmetics configured individually for each color range looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showGaugeBorder": "1", "gaugeBorderThickness": "5", "showValue": "1", "valueBelowPivot": "1", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00", "borderColor": "#780101", "borderAlpha": "100" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19", "borderColor": "#696840", "borderAlpha": "100" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01", "borderColor": "#409C40", "borderAlpha": "100" } ] }, "dials": { "dial": [ { "value": "67" } ] } }
{
    "chart": {
        "caption": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showGaugeBorder": "1",
        "gaugeBorderThickness": "5",
        "showValue": "1",
        "valueBelowPivot": "1",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00",
                "borderColor": "#780101",
                "borderAlpha": "100"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19",
                "borderColor": "#696840",
                "borderAlpha": "100"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01",
                "borderColor": "#409C40",
                "borderAlpha": "100"
            }
        ]
    },
    "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showGaugeBorder": "1",
            "gaugeBorderThickness": "5",
            "showValue": "1",
            "valueBelowPivot": "1",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00",
                "borderColor": "#780101",
                "borderAlpha": "100"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19",
                "borderColor": "#696840",
                "borderAlpha": "100"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01",
                "borderColor": "#409C40",
                "borderAlpha": "100"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

To configure borders individually for each color range, we use the attributes that belong to the color object, which in turn belongs to the colorRange object. Given below is a brief description of the attributes used to configure individual borders:

Attribute Name Description

borderColor

It is used to specify the hex code for the color that will be applied to the range border, e.g. #780101.

borderAlpha

It is used to specify the transparency for the range border, using a value between 0 (transparent) and 100 (opaque).

Configuring the Entire Border for the Gauge at Once

You can also configure the cosmetics for the entire border at once.

An angular gauge rendered with the entire border customized at once looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showGaugeBorder": "1", "gaugeBorderColor": "#111111", "gaugeBorderThickness": "1", "gaugeBorderAlpha": "100", "showValue": "1", "valueBelowPivot": "1", "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showGaugeBorder": "1",
        "gaugeBorderColor": "#111111",
        "gaugeBorderThickness": "1",
        "gaugeBorderAlpha": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showGaugeBorder": "1",
            "gaugeBorderColor": "#111111",
            "gaugeBorderThickness": "1",
            "gaugeBorderAlpha": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "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 entire border of the gauge scale at once:

Attribute Name Description

gaugeBorderColor

It is used to specify the hex code of the color that will be used to render the entire border of the gauge, e.g. #111111.

gaugeBorderThickness

It is used to specify the thickness, in pixels, for the entire border of the gauge, e.g. 1.

gaugeBorderAlpha

It is used to specify the transparency for the entire border of the gauge, using a value between 0 (transparent) and 100 (opaque).

Setting the Border Color as a Derivative of the Fill Color

Another option to configure the gauge border is to use a derivative of the fill color used for the corresponding range.

An angular gauge rendered with the derivative of the fill color applied to the border looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showGaugeBorder": "1", "gaugeBorderColor": "{dark-30}", "gaugeBorderThickness": "5", "gaugeBorderAlpha": "100", "showValue": "1", "valueBelowPivot": "1", "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showGaugeBorder": "1",
        "gaugeBorderColor": "{dark-30}",
        "gaugeBorderThickness": "5",
        "gaugeBorderAlpha": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showGaugeBorder": "1",
            "gaugeBorderColor": "{dark-30}",
            "gaugeBorderThickness": "5",
            "gaugeBorderAlpha": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "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 apply the derivative fill color:

Attribute Name Description

gaugeBorderColor

It is used to specify the derivative of the fill color that should be applied to the border. For example, {dark-30} specifies that the color applied to the border for each range should be 30% darker than its corresponding fill color.

Configuring the Gauge Radius and Inner Radius

Based on the data values provided, the gauge automatically calculates the outer and inner radius for the color range scale. You can, however, explicitly set the radius for the gauge.

An angular gauge with the outer and inner radius explicitly set to 180 and 30, respectively, looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "gaugeFillMix": "{dark-30},{light-60},{dark-10}", "gaugeOuterRadius": "180", "gaugeInnerRadius": "120", "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
        "gaugeOuterRadius": "180",
        "gaugeInnerRadius": "120",
        "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
            "gaugeOuterRadius": "180",
            "gaugeInnerRadius": "120",
            "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 radius:

Attribute Name Description

gaugeOuterRadius

It is used to specify the outer radius, in pixels, for the color range scale.

gaugeInnerRadius

It is used to specify the inner radius, in pixels, for the color range scale. This attribute can take two types of values: one as exact pixels and the second as a percentage of the outer radius (e.g. 75%).

An angular gauge rendered with the inner radius specified as 75% of the outer radius looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "gaugeOuterRadius": "180", "gaugeInnerRadius": "75%", "gaugeFillMix": "{dark-30},{light-60},{dark-10}", "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "gaugeOuterRadius": "180",
        "gaugeInnerRadius": "75%",
        "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
        "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "gaugeOuterRadius": "180",
            "gaugeInnerRadius": "75%",
            "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
            "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>

Configuring Pivot Properties

Like the range scale and the border of the angular gauge, you can also configure the pivot that points to a data value on the range scale. For a pivot, you can:

  • Set the radius

  • Configure the cosmetic properties

Setting the Pivot Radius

The gauge automatically calculates the pivot radius based on the data values that you provide. However, you can also explicitly set the pivot radius.

An angular gauge with the pivot radius explicitly set to 10 looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "pivotRadius": "10", "valueBelowPivot": "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "pivotRadius": "10",
        "valueBelowPivot": "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "pivotRadius": "10",
            "valueBelowPivot": "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 attribute used to explicitly set the pivot radius:

Attribute Name Description

pivotRadius

It is used to specify the pivot radius, in pixels.

Configuring Pivot Cosmetics

For a pivot, you can:

  • Configure the pivot border cosmetics

  • Configure the pivot fill cosmetics

  • Configure the pivot fill color with a gradient fill mix

  • Configure the pivot fill color with a linear gradient

Configuring the Pivot Border Cosmetics

An angular gauge with the pivot border color and transparency set to #333333 and 100, respectively, looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "pivotRadius": "10", "pivotFillColor": "#CCCCCC", "pivotFillAlpha": "100", "pivotFillMix": " ", "showPivotBorder": "1", "pivotBorderColor": "#333333", "pivotBorderAlpha": "100", "valueBelowPivot": "1", "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "pivotRadius": "10",
        "pivotFillColor": "#CCCCCC",
        "pivotFillAlpha": "100",
        "pivotFillMix": " ",
        "showPivotBorder": "1",
        "pivotBorderColor": "#333333",
        "pivotBorderAlpha": "100",
        "valueBelowPivot": "1",
        "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "pivotRadius": "10",
            "pivotFillColor": "#CCCCCC",
            "pivotFillAlpha": "100",
            "pivotFillMix": " ",
            "showPivotBorder": "1",
            "pivotBorderColor": "#333333",
            "pivotBorderAlpha": "100",
            "valueBelowPivot": "1",
            "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 pivot border cosmetics:

Attribute Name Description

pivotBorderColor

It is used to specify the hex code of the color that will be applied to the pivot border.

pivotBorderAlpha

It is used to specify the transparency of the pivot border.

Configuring the Pivot Fill Cosmetics

An angular gauge with the pivot fill color and transparency set to #333333 and 100 looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "pivotRadius": "10", "pivotFillColor": "#5599CC", "pivotFillAlpha": "100", "pivotFillMix": " ", "valueBelowPivot": "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "pivotRadius": "10",
        "pivotFillColor": "#5599CC",
        "pivotFillAlpha": "100",
        "pivotFillMix": " ",
        "valueBelowPivot": "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "pivotRadius": "10",
            "pivotFillColor": "#5599CC",
            "pivotFillAlpha": "100",
            "pivotFillMix": " ",
            "valueBelowPivot": "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 pivot fill cosmetics:

Attribute Name Description

pivotFillColor

It is used to specify the hex code for the fill color for the pivot.

pivotFillAlpha

It is used to specify the transparency for the fill color for the pivot.

Configuring the Pivot Fill Color with a Gradient Fill Mix

The pivotFillColor attribute fills the pivot with a single solid color. However, you can also fill the pivot with a gradient fill.

An angular gauge rendered with the gradient fill mix configured for the pivot looks like this

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "pivotRadius": "10", "pivotFillColor": "#1122CC", "pivotFillMix": "{dark-50},{light-30},{dark-40}", "pivotFillRatio": "", "valueBelowPivot": "1", "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "pivotRadius": "10",
        "pivotFillColor": "#1122CC",
        "pivotFillMix": "{dark-50},{light-30},{dark-40}",
        "pivotFillRatio": "",
        "valueBelowPivot": "1",
        "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "pivotRadius": "10",
            "pivotFillColor": "#1122CC",
            "pivotFillMix": "{dark-50},{light-30},{dark-40}",
            "pivotFillRatio": "",
            "valueBelowPivot": "1",
            "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 apply a gradient fill mix to the pivot:

Attribute Name Description

pivotFillMix

It is used to specify the gradient fill formula, e.g. {dark-50},{light-30},{dark-40}

pivotFillRatio

It is used to specify the ratio in which the gradient color constituents will be applied to the pivot.

Configuring the Pivot Fill with a Linear Gradient

You can also specify the pivot to be filled with a linear gradient instead of the default radial gradient.

An angular gauge rendered with a linear gradient pivot fill looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "pivotRadius": "10", "pivotFillColor": "#CCCCCC", "pivotFillType": "linear", "pivotFillAngle": "0", "pivotFillMix": "{light-40},{dark-60}", "pivotFillRatio": "", "valueBelowPivot": "1", "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": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "pivotRadius": "10",
        "pivotFillColor": "#CCCCCC",
        "pivotFillType": "linear",
        "pivotFillAngle": "0",
        "pivotFillMix": "{light-40},{dark-60}",
        "pivotFillRatio": "",
        "valueBelowPivot": "1",
        "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": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "pivotRadius": "10",
            "pivotFillColor": "#CCCCCC",
            "pivotFillType": "linear",
            "pivotFillAngle": "0",
            "pivotFillMix": "{light-40},{dark-60}",
            "pivotFillRatio": "",
            "valueBelowPivot": "1",
            "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 configure a linear gradient pivot fill:

Attribute Name Description

pivotFillType

It is used to specify whether the gradient fill for the pivot should be linear or radial. This attribute takes only the following two values: linear and radial (default).

Top