Configuration valueIndicator

Specifies the appearance options of the value indicator.

Type: Object

The value indicator is a pointer which designates the main value of the gauge. There are four types of value indicators in the dxLinearGauge widget: rectangle, circle, rhombus and rangeBar. Different options of the valueIndicator configuration object can be used for each type. Refer to the type option description for information on the available options by type.

Show Example:
jQuery

In this example, the gauge value is indicated by a circle. The appearance of this circle is customized using the color and length options.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        valueIndicator: {
            type: 'circle',
            color: 'palegreen',
            length: 25
        },
        value: 89
    })
})

backgroundColor

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

Type: String
Default Value: 'none'

Show Example:
jQuery

In this example, a range bar indicates the gauge value. This range bar is two-colored. The main color, which is set using the valueIndicator's color option, is blue. The background color, which is set using the backgroundColor option, is lightblue.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'darkblue' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'blue',
            backgroundColor: 'lightblue'
        },
        value: 34
    })
})

baseValue

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

Type: Number
Default Value: undefined

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 option. In this instance, the range bar will display the range from the baseValue to the main gauge value.

Show Example:
jQuery

In this example, the gauge value is indicated by a range bar. This range bar displays the [20, 59] range, because the valueIndicator's baseValue option is set to 20 and the value option is set to 59.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'palegreen',
            baseValue: 20
        },
        value: 59
    })
})

color

Specifies the color of the value indicator.

Type: String
Default Value: '#C2C2C2'

Show Example:
jQuery

In this example, the value indicator is colored in lightskyblue.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'lavender' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            color: 'lightskyblue'
        },
        value: 65
    })
})

horizontalOrientation

Specifies the orientation of the rangeBar value indicator on a vertically oriented dxLinearGauge widget.

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

This option specifies the orientation of the value indicator 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

In this example, you can change the horizontalOrientation option of the value indicator using the drop-down menu under the gauge.

<div id="linearGaugeContainer" style="height:500px;margin:0 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">
    Value indicator's <b>horizontalOrientation</b>:
    <select id="dropdownListSelector">
        <option value="right">right</option>
        <option value="left">left</option>
    </select>
</div>
$(function() {
    $('#linearGaugeContainer').dxLinearGauge({
        geometry: { orientation: 'vertical' },
        valueIndicator: {
            type: 'rangeBar',
            color: 'royalblue',
            horizontalOrientation: 'right'
        },
        value: 81
    });

    $('#dropdownListSelector').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            valueIndicator: {
                horizontalOrientation: this.value
            }
        });
    });
})

length

Specifies the length of a value indicator in pixels.

Type: Number
Default Value: 15

NOTE: This option can be set for a value indicator of the rectangle, circle or rhombus type only.

Show Example:
jQuery

In this example, a rhombus indicates the gauge value. This rhombus is displayed with a 30-pixel length.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        valueIndicator: {
            type: 'rhombus',
            color: 'orangered',
            length: 30
        },
        value: 59
    })
})

offset

Specifies the distance between a value indicator and an invisible scale line.

Type: Number
Default Value: 10

Show Example:
jQuery

In this example, the offset option is set to -45.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        valueIndicator: {
            color: 'lightblue',
            offset: -45
        },
        value: 50
    })
})

size

Specifies the range bar size for a value indicator of the rangeBar type.

Type: Number
Default Value: 10

Show Example:
jQuery

In this example, a range bar represents the gauge value. This range bar is increased in thickness up to 90 pixels using the size option.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'palevioletred' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'thistle',
            size: 90
        },
        value: 100
	})
})

text

Specifies the appearance of the text displayed in a value indicator of the rangeBar type.

Type: Object

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

Show Example:
jQuery

This example shows how to add and customize text. Here, the text displays the formatted gauge value with a precision of 2. This text is indented from the range bar by 4 pixels. In addition, the font color of the text is changed to dodgerblue.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'white' },
        scale: {
            majorTick: {
                color: 'black',
                tickInterval: 10
            },
            minorTick: {
                visible: true,
                color: 'grey',
                tickInterval: 5
            }
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'powderblue',
            text: {
                indent: 3,
                format: 'fixedPoint',
                precision: 2,
                font: {
                    color: 'dodgerblue'
                }
            }
        },
        value: 87.546
    })
})

type

Specifies the type of the value indicator.

Type: String
Default Value: 'rangebar'
Accepted Values: 'rectangle' | 'circle' | 'rhombus' | 'rangebar'

Different options of the valueIndicator configuration object can be set for different types of the value indicator. The following table represents the available options by type.

rectangle circle rhombus rangeBar
  • color
  • length
  • offset
  • width
  • color
  • length
  • offset
  • color
  • length
  • offset
  • width
  • color
  • offset
  • baseValue
  • size
  • backgroundColor
  • text
  • horizontalOrientation
  • verticalOrientation
Show Example:
jQuery

Use the drop-down menu below to change the type of the value indicator.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;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">
    Value indicator type:
    <select id="dropdownListSelector">
        <option value="rectangle">rectangle</option>
        <option value="circle">circle</option>
        <option value="rhombus">rhombus</option>
        <option value="rangeBar">rangeBar</option>
    </select>
</div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        valueIndicator: {
            type: 'rectangle'
        },
        value: 42
    });

    $('#dropdownListSelector').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            valueIndicator: {
                type: this.value
            }
        });
    });
})

verticalOrientation

Specifies the orientation of the rangeBar value indicator on a horizontally oriented dxLinearGauge widget.

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

This option specifies the orientation of the value indicator 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.

Show Example:
jQuery

In this example, you can change the verticalOrientation option of the value indicator using the drop-down menu under the gauge.

<div id="linearGaugeContainer" style="height:150px;width:700px;margin:0 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">
    Value indicator's <b>verticalOrientation</b>:
    <select id="dropdownListSelector">
        <option value="bottom">bottom</option>
        <option value="top">top</option>
    </select>
</div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        geometry: { orientation: 'horizontal' },
        valueIndicator: {
            color: 'royalblue',
            verticalOrientation: 'bottom'
        },
        value: 81,
        subvalues: [43, 12, 83]
    });

    $('#dropdownListSelector').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            valueIndicator: {
                verticalOrientation: this.value
            }
        });
    });
})

width

Specifies the width of a value indicator in pixels.

Type: Number
Default Value: 15

NOTE: This option can be set for a value indicator of the rectangle or rhombus type only.

Show Example:
jQuery

In this example, a rhombus indicates the gauge value. This rhombus is displayed with a 30-pixel width.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        valueIndicator: {
            type: 'rhombus',
            color: 'orangered',
            width: 30
        },
        value: 89
    })
})