subvalueIndicator

Specifies the appearance options of subvalue indicators.

Type: Object

The dxLinearGauge widget can display one main value and several subvalues. The gauge's main value and subvalues are indicated by special pointers. You can customize the appearance of these pointers using the valueIndicator and subvalueIndicator configuration objects correspondingly.

The subvalue indicator is a pointer which designates an extra value on a scale. Subvalue indicators can be of two types: triangleMarker and textCloud. Different options of the subvalueIndicator configuration object can be used for each type. If you use the triangleMarker indicator, you can set the length and width options. If you use the textCloud indicator, the arrowLength and text options become available. The color, offset, horizontalOrientation and verticalOrientation options can be used with an indicator of any type.

Show Example:
jQuery

In this example, the triangleMarker subvalue indicators are colored in forestgreen and increased in length to 20 pixels.


                                    

                                    

arrowLength

Specifies the length of an arrow for the subvalue indicator of the textCloud type in pixels.

Type: Number
Default Value: 5

Show Example:
jQuery

In this example, the subvalues are indicated by text clouds. The arrowLength option of these subvalue indicators is set to 10.


                                    

                                    

color

Specifies the color of a subvalue indicator.

Type: String
Default Value: '#8798a5'

Show Example:
jQuery

In this example, the subvalue indicators are colored in forestgreen.


                                    

                                    

horizontalOrientation

Specifies the orientation of the subvalue indicators on a vertically oriented dxLinearGauge widget.

Type: String
Default Value: 'left'
Accepted Values: 'left' | 'right'

This option specifies the orientation of the subvalue indicators relative to an invisible scale line.

NOTE: The horizontalOrientation option requires the gauge to be vertical. Assign "vertical" to the geometry | orientation option to display the gauge vertically.

Show Example:
jQuery

In this example, you can change the horizontalOrientation option of the subvalue indicators using the drop-down menu under the gauge.


                                    

                                    

length

Specifies the length for a subvalue indicator of the triangleMarker type in pixels.

Type: Number
Default Value: 14

Show Example:
jQuery

In this example, the subvalues are indicated by triangle markers. The length of these markers is set to 50 pixels.


                                    

                                    

offset

Specifies the distance between a subvalue indicator and an invisible scale line in pixels.

Type: Number
Default Value: -1

Show Example:
jQuery

In this example, the subvalue indicator's offset option us set to -20.


                                    

                                    

text

Specifies the appearance of the text displayed in a subvalue indicator of the textCloud type.

Type: Object

Show Example:
jQuery

In this example, several text options of subvalue indicators are changed. These indicators display the text formatted in the fixedPoint format with a precision of 2. In addition, this text is colored in dodgerblue using the font color option.


                                    

                                    

type

Specifies the type of subvalue indicators.

Type: String
Default Value: 'triangleMarker'
Accepted Values: 'triangleMarker' | 'textcloud'

Different options of the subvalueIndicator configuration object can be set for different types of the subvalue indicators. The following table represents the available options by types.

triangleMarker textCloud
  • color
  • offset
  • horizontalOrientation
  • verticalOrientation
  • length
  • width
  • color
  • offset
  • horizontalOrientation
  • verticalOrientation
  • arrowLength
  • text
Show Example:
jQuery

Use the drop-down menu under the gauge to change the type of the subvalue indicators.


                                    

                                    

verticalOrientation

Specifies the orientation of the subvalue indicators on a horizontally oriented dxLinearGauge widget.

Type: String
Default Value: 'top'
Accepted Values: 'top' | 'bottom'

This option specifies the orientation of the subvalue indicators relative to an invisible scale line.

NOTE: The verticalOrientation option requires the gauge to be horizontal. Assign "horizontal" to the geometry | orientation option to display the gauge horizontally.

Show Example:
jQuery

In this example, you can change the verticalOrientation option of the subvalue indicators using the drop-down menu under the gauge.


                                    

                                    

width

Specifies the width for a subvalue indicator of the triangleMarker type in pixels.

Type: Number
Default Value: 13

Show Example:
jQuery

In this example, the subvalues are indicated by triangle markers. The width of these markers is set to 30 pixels.