Documentation

Usage

Once you are setup with angular-gauge and its dependencies, you can straight forward use it on any HTML page like:

Config Options

There are plenty of configurable options available to tune the Gauge as per your needs. Following is the extensive list of configurable options here.

Name	Description	Required	Default value	Possible Values
size	Specifies the size of the canvas in which Gauge will be drawn. It is used as width and height both.	No	200	Positive Integer
type	Specifies the gauge's type.	No	"full"	"full", "semi", "arch"
min	Specifies the minimum numeric value for gauge's scale.	No	0	Any numeric value
max	Specified the maximum numeric value for gauge's scale.	No	100	Any numeric value
value	Specifies the current value of the Gauge in the range specified by min and max. It is a required attribute.	Yes	undefined	A numeric value
cap	The style of line ending at the gauge's end.	No	"butt"	"round", "butt"
thick	Specified the thickness of the gauge's bar.	No	6	Any Positive Integer
label	Specifies the text to display below the Gauge's reading.	No	undefined	Any string
foreground-color	Specifies the foreground color of the Gauge's bar./td>	No	rgba(0, 150, 136, 1)	Any color value string
background-color	Specifies the background color of the Gauge's bar.	No	rgba(0, 0, 0, 0.1)	Any color value string
append	Specifies a string appended to the Gauge's reading. For example "%" most commonly used.	No	undefined	Any string
prepend	Specifies a string prepended to the Gauge's reading. For example "$" in case of financial data displayed in Gauge.	No	undefined	Any string
duration	Specifies the duration (in milliseconds) of the Gauge's animation	No	1500	A positive integer
thresholds	Specifies an object of threshold values at which the gauge's color changes. Checkout the example given below at 'Configure Threshold color ranges' section.	No	None	A special object {}
label-only	Only label specified by label attribute is shown, when set to true.	No	false	true | false
fraction-size	Number of decimal places to round the number to. If this is not provided then the fraction size is computed from the current locale's number formatting pattern.	No	none	A positive Integer

CSS

There are no CSS dependencies needs to be included. Even the fonts used in Gauge's text are driven by application-wide font stylings. However, if you like the fonts which are displayed in demos section, use Open Sans Google Fonts.

Global Defaults

angular-gauge ships with a custom provider to globally set config options for all gauge instances used in the application during angular config phase. The provider exposes a single API to set config options:

Here, customOptions is an object {} where keys are the config options name (in camelCase notation), mentioned in above section. For example, let see how to set size, cap, thick, foreground-color, background-color options globally using provider as shown below:

Configure Threshold Color Ranges

You can customize the colors of the gauge based on the current value being shown. This feature is introduced in v2.1.0. Make sure to update your local copy before using this feature.

In order to show different colors when gauge crosses certain value, use property thresholds. It takes an object with the threshold value as key and an object with color property as value. For example:

The keys in the threshold object signifies the minimum value at which the color will be applied. For instance, if the gauge's current value is 53.2, then orange color will be applied because after point 40 every value will be displayed as orange, until next threshold is encountered. In this example 75.5 is the next threshold.