Configuration subvalueIndicator

Specifies the appearance options of subvalue indicators.

Type: Object

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

View Demo

Show Example:
jQuery

In this example, several options of the subvalueIndicator configuration object are changed. Here, the gauge subvalues are indicated by triangle markers. The appearance of these markers is customized using the color and length options.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function() {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'lightgreen' },
        scale: {
            startValue: 0,
            endValue: 1000
        },
        subvalueIndicator: {
            type: 'triangleMarker',
            color: 'forestgreen',
            length: 20
        },
        value: 439.92,
        subvalues: [135.35, 591.5, 942]
    });
})

type

Specifies the type of subvalue indicators.

Type: String
Default Value: 'trianglemarker'
Accepted Values: 'rectangleNeedle' | 'triangleNeedle' | 'twoColorNeedle' | 'rangeBar' | 'trianglemarker' | 'textcloud'

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