text

Specifies the appearance of the text displayed in a value indicator of the rangeBar type.

Type: Object

Note that the indent option of the text configuration object must not be set to 0 if you need to show the text.

Show Example:
jQuery

This example shows how to add and customize text. Here, the text displays the formatted gauge value with a precision of 2. This text is indented from the range bar by 4 pixels. In addition, the font color of the text is changed to dodgerblue.


                                    

                                    

customizeText

Specifies a callback function that returns the text to be displayed in a value indicator of the rangeBar type.

Type: function
Function parameters:
indicatedValue: Object

Defines an indicated value.

Object structure:
value: Number

Specifies the scale value to be displayed in the value indicator.

valueText: String

Specifies the scale value using an applied format, if the format and precision (optional) options are specified.

Return Value: String

The text to be displayed by a value indicator.

Default Value: undefined

When implementing a callback function for this option, use the value displayed in the value indicator. 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.

Show Example:
jQuery

In this example, a range bar indicates the gauge value. The text that displays this value is customized using the customizeText option.


                                    

                                    

font

Specifies font options for the text displayed by a value indicator of the rangeBar type.

Type: Object

Show Example:
jQuery

In this example, several font options of the range bar text are changed.


                                    

                                    

format

Specifies a format for the text displayed in a value indicator of the rangeBar type.

Type: String
Default Value: undefined
Accepted Values: 'currency' | 'fixedPoint' | 'percent' | 'decimal' | 'exponential' | 'largeNumber' | 'thousands' | 'millions' | 'billions' | 'trillions'

The rangeBar value indicator can display the scale value that is currently designated. You can apply formatting to the value indicator text using one of the numeric formats.

NOTE: You can set a precision for the value indicator text using the precision option.

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, a range bar indicates the gauge value. The range bar text displays this value in the thousands format.


                                    

                                    

indent

Specifies the range bar's label indent in pixels.

Type: Number
Default Value: 0

If this property is set to 0, the range bar text is not shown.

Show Example:
jQuery

In this example, the gauge value is indicated by a range bar. The text that displays this value is indented from the range bar by 2 pixels.


                                    

                                    

precision

Specifies a precision for the formatted value displayed by a value indicator of the rangeBar type.

Type: Number
Default Value: undefined

The value of this option must be an integer indicating the number of digits to show for the scale value displayed by the rangeBar value indicator.

This option is used when the value indicator displays a scale value with an applied format. To learn how to set a format for the value indicator text, refer to the format option description.

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

Show Example:
jQuery

In this example, a range bar indicates the gauge value. The range bar text displays this value in the fixedPoint format with a precision of 1.