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 several types of value 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 the options that can be specified for a particular type, refer to one of the following sections.

When using ASP.NET MVC Wrappers, configure the value indicator in the following manner.

@(Html.DevExtreme().CircularGauge()
    // ...
    .ValueIndicator(i => i
        .TextCloud() // or any other indicator
        .ArrowLength(10)
        // ...
        // other indicator options go here 
    )
)

View Demo

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.


                                    

                                    

type

Specifies the value indicator type.

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

Different options of the valueIndicator configuration object can be set for different types of the value indicator. These options are listed within the Indicator Types section.

Show Example:
jQuery

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