All docs
V18.2
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery CircularGauge - scale

Specifies a 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. 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.

allowDecimals

Specifies whether to allow decimal values on the scale. When false, the scale contains integer values only.

Type:

Boolean

Default Value: undefined

customMinorTicks

Specifies an array of custom minor ticks.

Type:

Array<Number>

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.

customTicks

Specifies an array of custom major ticks.

Type:

Array<Number>

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

endValue

Specifies the end value for the scale of the gauge.

Type:

Number

Default Value: 100
Cannot be used in themes.

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.

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

minorTickInterval

Specifies an interval between minor ticks.

Type:

Number

Default Value: undefined

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

View Demo

orientation

Specifies the orientation of scale ticks.

Type:

String

Default Value: 'outside'
Accepted Values: 'center' | 'inside' | 'outside'

This property specifies the orientation of scale ticks relative to an invisible scale line.

Use the CircularGaugeElementOrientation enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Outside, Inside, and Center.

startValue

Specifies the start value for the scale of the gauge.

Type:

Number

Default Value: 0
Cannot be used in themes.

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.

tickInterval

Specifies an interval between major ticks.

Type:

Number

Default Value: undefined

If this property is not set, major ticks are arranged automatically.