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. Subvalue indicators can be of two types: triangleMarker and textCloud. Different options of the subvalueIndicator configuration object can be used for each type. If you use the triangleMarker indicator, you can set the length and width options. If you use the textCloud indicator, the arrowLength and text options become available. The color and offset options can be used with an indicator of any type.

Show Example:
jQuery

In this example, the triangleMarker subvalue indicators are colored in forestgreen and increased in length to 20 pixels.

<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]
    });
})

arrowLength

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

Type: Number
Default Value: 5

Show Example:
jQuery

In this example, the subvalues are indicated by text clouds. The arrowLength option of these subvalue indicators is set to 10.

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

color

Specifies the color of a subvalue indicator.

Type: String
Default Value: '#8798a5'

Show Example:
jQuery

In this example, the subvalue indicators are colored in forestgreen.

<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: {
            color: 'forestgreen'
        },
        value: 439.92,
        subvalues: [135.35, 591.5, 942]
    });
})

length

Specifies the length for a subvalue indicator of the triangleMarker type in pixels.

Type: Number
Default Value: 14

Show Example:
jQuery

In this example, the subvalues are indicated by triangle markers. The length of these markers is set to 50 pixels.

<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',
            length: 50
        },
        value: 439.92,
        subvalues: [135.35, 591.5, 942]
    });
})

offset

Specifies the distance between a subvalue indicator and an invisible scale line in pixels.

Type: Number
Default Value: 6

Show Example:
jQuery

In this example, the subvalue indicator's offset option us set to -20.

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

text

Specifies the appearance of the text displayed in a subvalue indicator of the textCloud type.

Type: Object

Show Example:
jQuery

In this example, several text options of subvalue indicators are changed. These indicators display the text formatted in the fixedPoint format with a precision of 2. In addition, this text is colored in dodgerblue using the font color option.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'lightgreen' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        subvalueIndicator: {
            type: 'textcloud',
            color: 'powderblue',
            text: {
                format: 'fixedPoint',
                precision: 1,
                font: {
                    color: 'dodgerblue'
                }
            }
        },
        value: 87.54,
        subvalues: [45.3, 12, 59.42]
    })
})

type

Specifies the type of subvalue indicators.

Type: String
Default Value: 'triangleMarker'
Accepted Values: 'triangleMarker' | 'textcloud'

Different options of the subvalueIndicator configuration object can be set for different types of the subvalue indicators. The following table represents the available options by types.

triangleMarker textCloud
  • color
  • offset
  • length
  • width
  • color
  • offset
  • arrowLength
  • text
Show Example:
jQuery

Use the drop-down menu under the gauge to change the type of the subvalue indicators.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
<div id="selectContainer" style="height:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Subvalue indicator type:
    <select id="dropdownListSelector">
        <option value="triangleMarker">triangleMarker</option>
        <option value="textcloud">textCloud</option>
    </select>
</div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'lightgreen' },
        scale: {
            startValue: 0,
            endValue: 1000
        },
        subvalueIndicator: {
            type: 'triangleMarker'
        },
        value: 439.92,
        subvalues: [135.35, 591.5, 942]
    });

    $('#dropdownListSelector').change(function () {
        var gauge = $('#circularGaugeContainer').dxCircularGauge('instance');
        gauge.option({
            subvalueIndicator: {
                type: this.value
            }
        });
    });
})

width

Specifies the width for a subvalue indicator of the triangleMarker type in pixels.

Type: Number
Default Value: 13

Show Example:
jQuery

In this example, the subvalues are indicated by triangle markers. The width of these markers is set to 30 pixels.

<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',
            width: 30
        },
        value: 439.92,
        subvalues: [135.35, 591.5, 942]
    });
})