Configuration

An object that defines configuration options for the dxCircularGauge widget.

animationDuration

Determines how long animation runs.

Type: Number
Default Value: 1000

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

animationEnabled

Indicates whether or not animation is enabled.

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

To make needles and range bars move smoothly to the specified values, enable animation by setting the animationEnabled property to true.

commonMarkerSettings

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 the corresponding common values.

commonNeedleSettings

An object that defines 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. If you need 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 the corresponding common values.

commonRangeBarSettings

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 the 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.

geometry

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

Type: Object

margin

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

Type: Object

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

markers[]

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[]

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.

preset

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

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

Use this property to set a predefined or custom preset. The options defining a gauge’s appearance will be set to the values of the specified preset. However, you can override some of these values within the gaugeOptions configuration object.
Set "none" to configure all the elements of the dxCircularGauge widget by yourself.

rangeBars[]

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 options of the gauge's range container.

Type: Object

In addition to the individual values indicated by needles, you can indicate different ranges on the scale. For instance, you can indicate the range of warm and cold temperatures in a circular gauge, which represents a thermometer. To set 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.

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 options of the gauge's scale.

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.

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.

spindle

Specifies options for the CircularGauge spindle.

Type: Object
Default Value: undefined

A spindle is a base for CircularGauge needles. A spindle is always positioned at the center of the CircularGauge. You can set its visibility, size and color using the spindle configuration object.

subtitle

Specifies the widget subtitle.

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 CircularGauge (LineraGauge) widget is displayed without a subtitle.

title

Specifies a title for the gauge.

Type: Object|String

Use this property to set the text to be displayed as 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 text is not specified for a title, the widget is displayed without a title.
You can also place details on the gauge below the title. To do this, specify the subtitle configuration option.

tooltip

Specifies tooltip options for the gauge.

Type: Object

A tooltip is a small pop-up rectangle that displays the value of the tick 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.