Vue CircularGauge - subvalueIndicator

Specifies the appearance properties of subvalue indicators.

Selector: DxSubvalueIndicator
Type:

Object

The CircularGauge UI component 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. There are several types of subvalue indicators. Set the required one by using the type property, and then specify the properties that are specific to this type, if needed. To learn about the properties that can be specified for a particular type, refer to one of the following sections.

View Demo

arrowLength

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

Selector: arrow-length
Type:

Number

Default Value: 5
This member is exposed by the following entities:

backgroundColor

Specifies the background color for the indicator of the rangeBar type.

Selector: background-color
Type:

String

Default Value: 'none'
This member is exposed by the following entities:

This property supports the following colors:

baseValue

Specifies the base value for the indicator of the rangeBar type.

Selector: base-value
Type:

Number

Default Value: undefined
This member is exposed by the following entities:
Cannot be used in themes.

By default, a range bar starts from the beginning of the gauge scale. If you need to draw the range bar starting from a specific scale value, assign the required value to the baseValue property. In this instance, the range bar will display the range from the baseValue to the main gauge value.

View Demo

beginAdaptingAtRadius

Specifies a radius small enough for the indicator to begin adapting.

Selector: begin-adapting-at-radius
Type:

Number

Default Value: 50
This member is exposed by the following entities:

When adapting, the indicator adjusts its parts and surroundings proportionally to the changing UI component size. The adjustments affect the incidator's indent from the center, the offset from the scale, and the spindle's size and gap.

color

Specifies a color of the indicator.

Type:

String

This property supports the following colors:

horizontalOrientation

Specifies the orientation of the rangeBar indicator. Applies only if the geometry.orientation property is "vertical".

Selector: horizontal-orientation
Type:

String

Default Value: 'right' (value indicators), 'left' (subvalue indicators)
Accepted Values: 'left' | 'right'
This member is exposed by the following entities:

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

indentFromCenter

Specifies the distance between the needle and the center of a gauge for the indicator of a needle-like type.

Selector: indent-from-center
Type:

Number

Default Value: 0
This member is exposed by the following entities:

length

Specifies the indicator length.

Type:

Number

Default Value: 15
This member is exposed by the following entities:

offset

Specifies the distance between the indicator and the invisible scale line.

Type:

Number

CircularGauge Demo View Demo

palette

Sets the palette to be used to colorize indicators differently.

Type:

Array<String>

|

String

Default Value: 'Material'
Accepted Values: 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office'

This property accepts either the name of a predefined palette or an array of colors. The array can include the following colors:

secondColor

Specifies the second color for the indicator of the twoColorNeedle type.

Selector: second-color
Type:

String

Default Value: '#E18E92'
This member is exposed by the following entities:

When you use a twoColorNeedle indicator, define the colors for it using the color and secondColor properties. The color property sets the color for the base of the needle. The secondColor property sets the color for the tip of the needle.

This property supports the following colors:

In addition, you can specify the ratio between the main and the second color using the secondFraction property.

secondFraction

Specifies the length of a twoNeedleColor type indicator tip as a percentage.

Selector: second-fraction
Type:

Number

Default Value: 0.4
This member is exposed by the following entities:

size

Specifies the range bar size for an indicator of the rangeBar type.

Type:

Number

Default Value: 10
This member is exposed by the following entities:

spindleGapSize

Specifies the inner diameter in pixels, so that the spindle has the shape of a ring.

Selector: spindle-gap-size
Type:

Number

Default Value: 10
This member is exposed by the following entities:

Set this property to 0 so that the spindle has the shape of a circle.

spindleSize

Specifies the spindle's diameter in pixels for the indicator of a needle-like type.

Selector: spindle-size
Type:

Number

Default Value: 14
This member is exposed by the following entities:

text

Specifies the appearance of the text displayed in an indicator of the rangeBar type.

Selector: DxText
Type:

Object

This member is exposed by the following entities:

Note that the indent property of the text configuration object must not be set to 0 if you need to show the text.

type

Specifies the type of subvalue indicators.

Type:

String

Default Value: 'triangleMarker'
Accepted Values: 'rectangleNeedle' | 'triangleNeedle' | 'twoColorNeedle' | 'rangeBar' | 'triangleMarker' | 'textCloud'

Different properties of the subvalueIndicator configuration object can be set for different types of the subvalue indicators. These properties are listed within the Indicator Types section.

View Demo

verticalOrientation

Specifies the orientation of the rangeBar indicator. Applies only if the geometry.orientation property is "horizontal".

Selector: vertical-orientation
Type:

String

Default Value: 'bottom' (value indicators), 'top' (subvalue indicators)
Accepted Values: 'bottom' | 'top'
This member is exposed by the following entities:

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

width

Specifies the width of an indicator in pixels.

Type:

Number

Default Value: 2
This member is exposed by the following entities: