Loading
Configuring Gauge Cosmetics
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:
Given below is a brief description of the attributes used to configure the gradient fill for the gauge:
| Attribute Name | Description |
|---|---|
|
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} |
|
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 |
The data structure needed to configure a gradient fill is given below:
{
"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"
}
]
}
}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:
Given below is a brief description of the attribute used to show/hide the gauge border:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the gauge border will be shown or hidden. Setting this attribute to |
The data structure used to render the chart above is shown below:
{
"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"
}
]
}
}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:
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 |
|---|---|
|
It is used to specify the hex code for the color that will be applied to the range border, e.g. #780101. |
|
It is used to specify the transparency for the range border, using a value between 0 (transparent) and 100 (opaque). |
The data structure needed to configure the cosmetics for individual borders is given below:
{
"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"
}
]
}
}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:
Given below is a brief description of the attributes used to configure the entire border of the gauge scale at once:
| Attribute Name | Description |
|---|---|
|
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. |
|
It is used to specify the thickness, in pixels, for the entire border of the gauge, e.g. 1. |
|
It is used to specify the transparency for the entire border of the gauge, using a value between 0 (transparent) and 100 (opaque). |
The data structure needed to configure the entire chart border at once is give below:
{
"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"
}
]
}
}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:
Given below is a brief description of the attribute used to apply the derivative fill color:
| Attribute Name | Description |
|---|---|
|
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. |
The data structure needed to apply a derivative of the fill color to the border is given below:
{
"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"
}
]
}
}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:
Given below is a brief description of the attributes used to explicitly set the radius:
| Attribute Name | Description |
|---|---|
|
It is used to specify the outer radius, in pixels, for the color range scale. |
|
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%). |
The data structure needed to render an angular gauge with the outer and inner radius explicitly set to 180 and 30 is given below:
{
"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"
}
]
}
}An angular gauge rendered with the inner radius specified as 75% of the outer radius looks like this:
The data structure needed to configure the inner radius as a fraction of the outer radius of the gauge is given below:
{
"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"
}
]
}
}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:
Given below is a brief description of the attribute used to explicitly set the pivot radius:
| Attribute Name | Description |
|---|---|
|
It is used to specify the pivot radius, in pixels. |
The following data structure explains how you can explicitly set the pivot radius:
{
"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"
}
]
}
}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:
Given below is a brief description of the attributes used to configure the pivot border cosmetics:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code of the color that will be applied to the pivot border. |
|
It is used to specify the transparency of the pivot border. |
The data structure needed to configure the pivot cosmetics is given below:
{
"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"
}
]
}
}Configuring the Pivot Fill Cosmetics
An angular gauge with the pivot fill color and transparency set to #333333 and 100 looks like this:
Given below is a brief description of the attributes used to configure the pivot fill cosmetics:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code for the fill color for the pivot. |
|
It is used to specify the transparency for the fill color for the pivot. |
The data structure needed to configure the pivot fill color and transparency is given below:
{
"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"
}
]
}
}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
Given below is a brief description of the attributes used to apply a gradient fill mix to the pivot:
| Attribute Name | Description |
|---|---|
|
It is used to specify the gradient fill formula, e.g. {dark-50},{light-30},{dark-40} |
|
It is used to specify the ratio in which the gradient color constituents will be applied to the pivot. |
The data structure needed to configure a gradient fill mix for the pivot is given below:
{
"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"
}
]
}
}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:
Given below is a brief description of the attribute used to configure a linear gradient pivot fill:
| Attribute Name | Description |
|---|---|
|
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). |
The data structure needed to configure a linear gradient pivot fill is given below:
{
"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"
}
]
}
}There! You have now seen how you can configure the cosmetics for the various elements of an angular gauge.