Configuration

An object that defines configuration options for the dxLinearGauge widget.

animation

Specifies animation options.

Type: Object

To make your gauge "live", enable animation for it by setting the enabled option of the animation object to true. In this instance, the gauge indicators will appear in motion. In addition, within the animation object, you can set an appropriate easing mode using the easing option and specify how long the animation should run using the duration option.

Show Example:
jQuery

In this example, the animation | duration option is changed to 2000 ms. In addition, the animation easing mode is changed to 'linear' using the animation | easing option. Switch between the radio buttons to see how the gauge animation performs with these settings.


                                    

                                    

animationDuration

Deprecated

Use the animation | duration option instead.

Determines how long animation runs.

Type: Number
Default Value: 1000

When animation is enabled for a gauge (see the animationEnabled option), you can set how long the animation must run. To do this, set the animationDuration option to a numeric value in milliseconds. The bigger the value, the slower the animation.

animationEnabled

Deprecated

Use the animation | enabled option instead.

Indicates whether or not animation is enabled.

Type: Boolean
Default Value: true
Accepted Values: true|false

When this option is set to true, the value and subvalue indicators move smoothly to the specified values.

commonMarkerSettings

Deprecated

Use the subvalueIndicator option instead.

An object that defines common configuration options for gauge markers.

Type: Object

Use this object's properties to set options for all gauge markers at once. If you need to set an individual value for a common option, use the corresponding marker object within the markers array. Values that are set individually override their corresponding common values.

commonNeedleSettings

Deprecated

Use the valueIndicator option instead.

An object defining the configuration options that are common for all gauge needles.

Type: Object

Use this object's properties to set options for all gauge needles at once. In case you have to set an individual value for a common option, use the corresponding needle object within the needles array. The values that are set individually override corresponding common values.

commonRangeBarSettings

Deprecated

Use the valueIndicator option instead.

An object that defines common configuration options for gauge range bars.

Type: Object

Use this object's properties to set options for all gauge range bars at once. If you need to set an individual value for a common option, use the corresponding rangeBar object within the rangeBars array. Values that are set individually override their corresponding common values.

containerBackgroundColor

Specifies the color of the parent page element.

Type: String
Default Value: 'none'

Set this property to the color of the parent page element. Certain elements of the widget will use this color so that they coordinate with the page. Currently, different auxiliary separators use the container background color, so there is no need to set a custom color for them.

Show Example:
jQuery

In this example, the containerBackgroundColor option is set to olive.


                                    

                                    

geometry

Specifies the options required to set the geometry of the dxLinearGauge widget.

Type: Object

Show Example:
jQuery

In this example, the gauge is oriented vertically.


                                    

                                    

loadingIndicator

Specifies the appearance of the loading indicator.

Type: Object

Usually, a gauge is quick enough to draw itself instantly for a viewer. There are, however, cases, when the gauge takes longer to be drawn. In such cases, it is recommended that the loading indicator is displayed. Use the gauge's showLoadingIndicator() and hideLoadingIndicator() methods to manage the loading indicator. To specify its appearance, use the loadingIndicator configuration object.

Show Example:
jQuery

In this example, the gauge options are assigned 2000 ms after the example is loaded. Until that time the loading indicator is displayed. Its background and font are changed using the backgroundColor and font options respectively. Take note that these options should be specified at design-time so that the changes are applied at the right time.


                                    

                                    

margin

Specifies the blank space in pixels between the widget's extreme elements and the boundaries of the area provided for the widget (see the size option).

Type: Object

Set the required values for the left, right, top and bottom margins using the margin object's corresponding options.

GaugeMargin ChartJS

markers[]

Deprecated

Use the subvalues option instead.

Specifies options for the gauge's marker(s).

Type: Array
Default Value: []

A marker is a small pointer that indicates a fixed value on a scale. If you need to mark a single value, assign an object defining a marker to the markers configuration object. In the marker's object, specify the value to be indicated, and define the marker's appearance and location.
If you need to indicate several values on a scale, specify markers as an array of objects defining markers. If you need to set similar values to properties of several markers, use the commonMarkerSettings configuration object. It exposes the properties that can be specified for all markers at once. Note that the values specified for a marker individually (in the markers array) override the values that are specified for all markers (in the commonMarkerSettings object).
To define a marker individually, use the properties listed in the markers object. In addition, any property of the commonMarkerSettings configuration object can be added to the marker's individual definition. For example, even though a common type is specified in the commonMarkerSettings, an individual type can be specified for each marker.

needles[]

Deprecated

Use the value option instead.

Specifies options for the gauge's needle(s).

Type: Array
Default Value: []

A needle is used to indicate a current value in the gauge. If you need to indicate a single value, assign an object defining a needle to the needles configuration object. In the needle's object, specify the value to be indicated, and define the needle's appearance and location.
If you need to indicate several values on a scale, specify needles as an array of objects defining needles. If you need to set similar values to properties of several needles, use the commonNeedleSettings configuration object. It exposes the properties that can be specified for all needles at once. Note that the values specified for a needle individually (in the needles array) override the values that are specified for all needles (in the commonNeedleSettings object).
To define a needle individually, use the properties listed in the needles object. In addition, any property of the commonNeedleSettings configuration object can be added to the needle's individual definition. For example, even though a common type is specified in the commonNeedleSettings, an individual type can be specified for each needle.

pathModified

Notifies a widget that it is embedded into the HTML page that uses a path modifier.

Type: Boolean
Default Value: false
Accepted Values: true|false

If you place a widget on a page that uses a path modifier, notify the widget about it by setting the pathModified option to true. As an example of such modifiers, the base HTML tag can be considered. Also, we recommend you to enable this option if you place the widget inside the <iframe> tag.

preset

Deprecated

Use a combination of the valueIndicator | type and subvalueIndicator | type options instead.

Sets the name of the preset to be used in the dxLinearGauge widget.

Type: String
Default Value: 'preset1'
Accepted Values: 'preset1' | 'preset2'

Presets are used to specify the type of gauge needles, markers and range bars. Each preset uses a needle/range bar and a marker. The following presets are defined.

  • preset1: circle + textCloud
  • preset2: rhombus + triangle

rangeBars[]

Deprecated

Use the value option instead.

Specifies options for the gauge's range bar(s).

Type: Array
Default Value: []

A range bar is a filled sector that represents a specific interval (e.g., working hours). If you need to show a single range bar, assign an object defining this range bar to the rangeBars configuration object. In the range bar's object, specify the bar boundaries and define the bar's appearance and location.
If you need to show several range bars, specify rangeBars as an array of objects defining range bars. If you need to set similar values to properties of several range bars, use the commonRangeBarSettings configuration object. It exposes the properties that can be specified for all range bars at once. Note that the values specified for a range bar individually (in the rangeBars array) override the values that are specified for all range bars (in the commonRangeBarSettings object).
To define a range bar individually, use the properties listed in the rangeBars object. In addition, any property of the commonRangeBarSettings configuration object can be added to the range bar's individual definition. For example, even though a common offset is specified in the commonRangeBarSettings, an individual offset can be specified for each range bar.

rangeContainer

Specifies gauge range container options.

Type: Object

For the purpose of more intelligible data visualization, you can combine values into ranges and color each range differently. For instance, you can indicate the range of warm and cold temperatures. To set the ranges, assign an array of objects defining the ranges to the ranges property of the rangeContainer configuration object. In addition, you can specify the orientation of the ranges relative to an invisible scale line, and an offset from this line using the rangeContainer properties.

Show Example:
jQuery

In this example, a number of options within the rangeContainer configuration object is changed. The range container is divided into ranges that are defined by the ranges option. These ranges are moved from the scale to a 5-pixel distance using the offset option. In addition, the backgroundColor option is set to firebrick.


                                    

                                    

redrawOnResize

Indicates whether to redraw the gauge when the size of the parent browser window changes or a mobile device is rotated.

Type: Boolean
Default Value: true
Accepted Values: true|false

The size of a gauge never changes when its container has a fixed size. Alternatively, its size changes proportionally when the parent window size changes and the redrawOnResize is set to true.

scale

Specifies the gauge's scale options.

Type: Object

To divide a scale, set its startValue and endValue properties. The scale's major and minor ticks will be calculated automatically, so that the tick labels do not overlap each other. Major ticks will be shown by default. To show minor ticks, set their visible property to true. You can set custom major and minor tick intervals, show custom major and minor ticks, and format tick labels. These and other scale options are available in the scale configuration object.

Show Example:
jQuery

In this example, several options of the gauge scale are changed. The scale is divided using the startValue and endValue options. Both the major and minor scale ticks are colored in black. In addition, the scale labels are displayed in a currency format.


                                    

                                    

size

Specifies the size of the widget in pixels.

Type: Object

The widget occupies the entire area of the parent container (division). If the container size (width or height) is set to zero, the widgets are not displayed.
To set the widget to a specific size that differs from the container size, use the size configuration object. Assign a height and width in pixels to the height and width properties.

Show Example:
jQuery

In this example, the size of the dxLinearGauge widget is less than the container size.


                                    

                                    

subtitle

Specifies a subtitle for the widget.

Type: Object|String

Use this property to set the text to be displayed as a gauge subtitle (the text below the title). If you need to specify the subtitle's font, assign an object to the subtitle property with the required options specified. In this instance, set the subtitle's text using the text property. When text is not specified for a subtitle, the widget is displayed without a subtitle.

Show Example:
jQuery

In this example, the subtitle text is assigned directly to the subtitle field.


                                    

                                    

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.


                                    

                                    

subvalues

Specifies a set of subvalues to be designated by the subvalue indicators.

Type: Array
Default Value: undefined

In addition to one main value, you can indicate several extra values on a gauge. These are called subvalues. To specify the subvalues, assign an array with them to the subvalues field.

You can obtain and change the subvalues at runtime. In order to do this, use the subvalues() and subvalues(subvalues) methods.

Subvalues are designated by subvalue indicators. You can customize the appearance of these indicators using the subvalueIndicator configuration object.

Show Example:
jQuery

In this example, several subvalues are displayed on the gauge.


                                    

                                    

theme

Specifies the name of the theme to be applied.

Type: String
Default Value: 'desktop'

Use this option to specify the name of the theme that should be applied to the widget. For information on customizing and implementing themes, refer to the Themes topic.

Show Example:
jQuery

In this example, a custom theme is implemented and applied to a gauge. In addition, you can change the type of the value indicator using the drop-down menu under the gauge. Note that options for the value indicator of each type are specified in separate objects within the gauge | valueIndicator configuration object.


                                    

                                    

title

Specifies a title for the gauge.

Type: Object|String

Use this property to set the text for the gauge title. If you need to specify the title's position on the widget, assign an object to the title property with the required title options specified. In this instance, set the title text using the text property. When title text is not specified, the widget is displayed without a title.

You can also place details on the gauge below the title. To do this, specifiy the subtitle configuration option.

Show Example:
jQuery

In this example, the title text is assigned directly to the title field.


                                    

                                    

tooltip

Specifies tooltip options for the gauge.

Type: Object

A tooltip is a small pop-up rectangle that displays the value of the indicator that is currently hovered over. You can enable or disable tooltips, format or customize the displayed text, and change the default appearance. Use the properties of the tooltip configuration object to do this.

Show Example:
jQuery

In this example, a number of the tooltip options are changed. The tooltip value is displayed in a currency format with the precision of 2. In addition, the font size and weight options are changed. To see the tooltip, hover over the red range bar.


                                    

                                    

value

Specifies the main value on a gauge.

Type: Number
Default Value: undefined

The main value is designated by the value indicator. To customize the appearance of the value indicator, use the valueIndicator configuration object.

You can obtain and change the gauge value at runtime. In order to do this, use the value() and value(value) methods.

Only one main value can be indicated on a gauge. Besides the main gauge value, you can indicate several extra values. Refer to the subvalues option description for more information.

Show Example:
jQuery

valueIndicator

Specifies the appearance options of the value indicator.

Type: Object

The value indicator is a pointer which designates the main value of the gauge. There are four types of value indicators in the dxLinearGauge widget: rectangle, circle, rhombus and rangeBar. Different options of the valueIndicator configuration object can be used for each type. Refer to the type option description for information on the available options by type.

Show Example:
jQuery

In this example, the gauge value is indicated by a circle. The appearance of this circle is customized using the color and length options.