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, precision, 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.

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.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)
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(barValue)
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 an applied format, if the format and precision (optional) options are specified.

Return Value: String

The text to be displayed by a bar label.

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 Provide a Custom 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: String
Default Value: undefined
Accepted Values: 'currency' | 'fixedPoint' | 'percent' | 'decimal' | 'exponential' | 'largeNumber' | 'thousands' | 'millions' | 'billions' | 'trillions'

A bar label displays the value of the bar. You can apply formatting to this label using one of the numeric formats.

In addition to predefined formats, you can utilize format tokens from the Globalize JavaScript library to assign a custom format.

For details on formatting, refer to the Data Formatting topic.

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

Specifies a precision for the formatted value displayed by labels.

Type: Number
Default Value: undefined

This option's value must be an integer indicating the number of digits to show in the value displayed by a label. The value of this option is used when a label displays a value with an applied format. To learn how to set a format for a label, refer to the format option description.

For general information on data formatting, refer to the Data Formatting topic.

Show Example:
jQuery

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


                                    

                                    

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.