label

Specifies the options of the labels that accompany gauge bars.

Type: Object

Each gauge bar is accompanied by a label that usually displays the value of the bar. Use the options of the label object to customize the label's text, specify its format, font, and distance between the label and the bar.

To hide labels, use the label.visible option or assign false straight to the label option.

View Demo

Show Example:
jQuery

In this example, several options of the labels are changed.


                                    

                                    

connectorColor

Specifies a color for the label connector text.

Type: String
Default Value: undefined

This option supports the following colors.

Show Example:
jQuery

In this example, label connectors are colored in 'darkseagreen' using the connectorColor option.


                                    

                                    

connectorWidth

Specifies the width of the label connector in pixels.

Type: Number
Default Value: 2

Show Example:
jQuery

In this example, the width of the label connectors is set to 1 pixel using the connectorWidth option.


                                    

                                    

customizeText

Specifies a callback function that returns a text for labels.

Type: function
Function parameters:
barValue: Object

Defines a value indicated by a bar label.

Object structure:
value: Number

Specifies the value indicated by a bar.

valueText: String

Specifies the value with applied formatting.

Return Value: String

The text to be displayed by a bar label.

Cannot be used in themes.

When implementing a callback function for this option, you can use the value indicated by a bar. This value can be accessed using the fields of the object that is passed as the function's parameter. Alternatively, you can use the this object within the function. This object has the same structure as the object passed as a parameter.

To discover text customization in greater detail, refer to the Customize Text topic.

Show Example:
jQuery

In this example, bar labels are customized using the customizeText option.


                                    

                                    

font

Specifies font options for bar labels.

Type: Object

Show Example:
jQuery

In this example, several font options of bar labels are changed.


                                    

                                    

format

Specifies a format for bar labels.

Type: Format
Default Value: undefined
See Also
  • format - provides a comprehensive overview of formatting capabilities. Note that only numeric subset of the predefined formats can be used.
  • Data Formatting - shows how to apply formatting to various widget elements.
Show Example:
jQuery

In this example, bars are accompanied by labels formatted in the 'fixedPoint' format with a precision of 2.


                                    

                                    

indent

Specifies the distance between the upper bar and bar labels in pixels.

Type: Number
Default Value: 20

Show Example:
jQuery

In this example, the indent option is set to 5.


                                    

                                    

precision

Deprecated

Use the label.format.precision option instead.

Specifies a precision for the formatted value displayed by labels.

Type: Number
Default Value: undefined

visible

Specifies whether bar labels appear on a gauge or not.

Type: Boolean
Default Value: true

Show Example:
jQuery

Use the check box under the gauge to show/hide the bar labels.