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 dxCircularGauge widget: rectangleNeedle, triangleNeedle, twoColorNeedle 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 types.

Show Example:
jQuery

In this example, several options of the valueIndicator configuration object are changed. Here, the gauge value is indicated by a two-color needle. The appearance of this needle is customized using the color, secondColor and width options. In addition, the look of the spindle is altered using the spindleSize and spindleGapSize options.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'twoColorNeedle',
            color: 'palegreen',
            secondColor: 'skyblue',
            width: 3,
            spindleSize: 20,
            spindleGapSize: 15
        },
        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="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        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="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        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="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'lavender' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            color: 'lightskyblue'
        },
        value: 65
    })
})

indentFromCenter

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

Type: Number
Default Value: 0

Show Example:
jQuery

In this example, the needle of the value indicator is indented from the center by 15 pixels.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            indentFromCenter: 15
        },
        value: 89
    })
})

offset

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

Type: Number
Default Value: 20

Show Example:
jQuery

In this example, the value indicator is displayed with a 70-pixel offset from the invisible scale line.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            offset: 70
        },
        value: 50
    })
})

secondColor

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

Type: String
Default Value: '#E18E92'

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

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

Show Example:
jQuery

In this example, the value indicator of a twoColorNeedle type is drawn in red and blue.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'green' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'twoColorNeedle',
            color: 'red',
            secondColor: 'blue'
        },
        value: 50
    })
})

secondFraction

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

Type: Number
Default Value: 0.4

Show Example:
jQuery

In this example, the value indicator of a twoColorNeedle type is drawn in red and blue. The blue part occupies 20% of the needle as the secondFraction option is set to 0.2.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'green' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'twoColorNeedle',
            color: 'red',
            secondColor: 'blue',
            secondFraction: 0.2
        },
        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="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'palevioletred' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'thistle',
            size: 90
        },
        value: 100
    })
})

spindleGapSize

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

Type: Number
Default Value: 10

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

Show Example:
jQuery

In this example, the spindleGapSize option of the triangleNeedle value indicator is set to 1.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'orange' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'triangleNeedle',
            spindleGapSize: 1
        },
        value: 67
    })
})

spindleSize

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

Type: Number
Default Value: 14

Show Example:
jQuery

In this example, the value indicator of the triangleNeedle type is drawn with a 25-pixel spindle.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'green' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'triangleNeedle',
            spindleSize: 25
        },
        value: 50
    })
})

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="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'white' },
        scale: {
            startValue: 0,
            endValue: 100,
            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 value indicator type.

Type: String
Default Value: 'rectangleNeedle'
Accepted Values: 'rectangleNeedle' | 'triangleNeedle' | 'twoColorNeedle' | '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 types.

rectangleNeedle triangleNeedle twoColorNeedle rangeBar
  • color
  • indentFromCenter
  • offset
  • spindleSize
  • spindleGapSize
  • width
  • color
  • indentFromCenter
  • offset
  • spindleSize
  • spindleGapSize
  • width
  • color
  • indentFromCenter
  • offset
  • spindleSize
  • spindleGapSize
  • width
  • secondColor
  • secondFraction
  • color
  • offset
  • baseValue
  • size
  • backgroundColor
  • text
Show Example:
jQuery

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

<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">
    Value indicator type:
    <select id="dropdownListSelector">
        <option value="rectangleNeedle">rectangleNeedle</option>
        <option value="triangleNeedle">triangleNeedle</option>
        <option value="twoColorNeedle">twoColorNeedle</option>
        <option value="rangeBar">rangeBar</option>
    </select>
</div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'rectangleNeedle'
        },
        value: 42
    });

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

width

Specifies, in pixels, the width for a value indicator of a needle-like type.

Type: Number
Default Value: 2

Show Example:
jQuery

In this example, the width option of the value indicator is set to 5.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'twoColorNeedle',
            width: 5
        },
        value: 89
    })
})