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.


                                    

                                    

customMinorTicks

Specifies an array of custom minor ticks.

Type: Array
Default Value: undefined
Cannot be used in themes.

If you need to show minor ticks, set the visible property to true. If you need to display a custom ticks set, you can configure it using the customMinorTicks property. Assign an array of custom tick values to this property.

Show Example:
jQuery

In this example, the scale's minor ticks are generated on the base of the Fibonacci sequence. An array with this sequence is assigned to the customMinorTicks option.


                                    

                                    

customTicks

Specifies an array of custom major ticks.

Type: Array
Default Value: undefined
Cannot be used in themes.

If you set the start and end scale values, major ticks will automatically be calculated and displayed. If you need to add intermediate (minor) ticks between the major ticks, set the visible property of the minorTick configuration object to true. If you need to display a custom ticks set, you can configure it using the customTicks property. Assign an array of custom major tick values to this property.

View Demo

Show Example:
jQuery

In this example, the scale's major ticks are generated on the base of the Fibonacci sequence. An array with this sequence is assigned to the customTicks option.


                                    

                                    

endValue

Specifies the end value for the scale of the gauge.

Type: Number
Default Value: 100
Cannot be used in themes.

Show Example:
jQuery

In this example, the scale is divided using the values assigned to the startValue and endValue fields.


                                    

                                    

hideFirstLabel

Deprecated

This feature is no longer available.

Specifies whether or not to hide the first scale label.

Type: Boolean
Default Value: false

hideFirstTick

Deprecated

This feature is no longer available.

Specifies whether or not to hide the first major tick on the scale.

Type: Boolean
Default Value: false

hideLastLabel

Deprecated

This feature is no longer available.

Specifies whether or not to hide the last scale label.

Type: Boolean
Default Value: false

hideLastTick

Deprecated

This feature is no longer available.

Specifies whether or not to hide the last major tick on the scale.

Type: Boolean
Default Value: false

horizontalOrientation

Specifies the orientation of scale ticks on a vertically oriented LinearGauge widget.

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

This option specifies the orientation of scale ticks 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

Change the horizontalOrientation option using the drop-down menu under the gauge.


                                    

                                    

label

Specifies common options for scale labels.

Type: Object

Scale labels represent textual values for major scale ticks. The label object exposes properties that allow you to specify custom text for scale labels and properties to change the text font.

Show Example:
jQuery

In this example, the text of the scale labels is customized using the customizeText option. In addition, the color and size options of the scale label text are changed.


                                    

                                    

majorTick

Deprecated

Use the tick option instead.

Specifies options of the gauge's major ticks.

Type: Object

Major ticks are calculated automatically based on the scale's startValue and endValue property values. They are visible by default. You can set a custom major tick interval or add custom major ticks using the tickInterval and customTickValues properties respectively. To specify the visibility of major ticks, use the visible and showCalculatedTicks properties. You can also specify the length, width and color of the major ticks using corresponding properties.

minorTick

Specifies options of the gauge's minor ticks.

Type: Object

Major and minor ticks are calculated automatically based on the scale's startValue and endValue property values. Major ticks are made visible by default. You can make minor tick visible as well, using their visible property. In addition, you can set a custom minor tick interval or add custom minor ticks using the tickInterval and customTickValues properties respectively. You can also specify the length, width and color of the minor ticks using corresponding properties.

View Demo

Show Example:
jQuery

In this example, the scale's minor ticks are colored in black and downscaled to 1 pixel. These ticks are generated with an interval of 5.


                                    

                                    

minorTickInterval

Specifies an interval between minor ticks.

Type: Number
Default Value: undefined

Major ticks are those that are accompanied by labels, which display the corresponding scale values. Minor ticks are the intermediate ticks between major ticks. Minor ticks are required when the major ticks are arranged far from each other. To set a custom minor tick interval, use the minorTickInterval property. If this property is not set, minor ticks are arranged automatically.

You can also add custom minor ticks by manually assigning an array of their values to the customTicks property.

Show Example:
jQuery

In this example, the scale's minor ticks are generated with an interval of 2.


                                    

                                    

startValue

Specifies the start value for the scale of the gauge.

Type: Number
Default Value: 0
Cannot be used in themes.

Show Example:
jQuery

In this example, the scale is divided using the values assigned to the startValue and endValue fields.


                                    

                                    

tick

Specifies options of the gauge's major ticks.

Type: Object

Major ticks are calculated automatically based on the scale's startValue and endValue property values. They are visible by default. You can set a custom major tick interval or a custom major ticks set using the tickInterval and customTicks properties respectively. To specify the visibility of major ticks, use the visible property. You can also specify the length, width and color of the major ticks using corresponding properties.

Show Example:
jQuery

In this example, the scale's major ticks are colored in black and lengthened up to 10 pixels. These ticks are generated with an interval of 50.


                                    

                                    

tickInterval

Specifies an interval between major ticks.

Type: Number
Default Value: undefined

Major ticks are the ticks that are accompanied by labels, which display the corresponding scale values. Use this property to divide the scale by major ticks in a specified interval one from another. If this property is not set, major ticks are automatically arranged so that labels do not overlap each other.

Show Example:
jQuery

In this example, the scale's major ticks are generated with an interval of 125.


                                    

                                    

verticalOrientation

Specifies the orientation of scale ticks on a horizontally oriented LinearGauge widget.

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

This option specifies the orientation of scale ticks 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.

NOTE: Beginning with 15.2.8 version of DevExtreme Data Visualization library, setting this option to "middle" is deprecated. Instead, set it to "center".

Show Example:
jQuery

Change the verticalOrientation option using the drop-down menu under the gauge.