Vue CircularGauge - valueIndicator

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 property, and then specify the properties that are specific to this type, if needed. To learn the properties that can be specified for a particular type, refer to one of the following sections.

• RangeBar
• RectangleNeedle
• TextCloud
• TriangleMarker
• TriangleNeedle
• TwoColorNeedle

View Demo

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

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

View Demo

When adapting, the indicator adjusts its parts and surroundings proportionally to the changing UI component size. The adjustments affect the incidator's indent from the center, the offset from the scale, and the spindle's size and gap.

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

This property specifies the orientation of the indicator relative to an invisible scale line.

Use the HorizontalEdge enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left and Right.

CircularGauge Demo View Demo

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

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

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

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

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

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

Use the GaugeIndicatorType enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: RectangleNeedle, TriangleNeedle, TwoColorNeedle, RangeBar, TriangleMarker, and TextCloud.

View Demo

This property specifies the orientation of an indicator relative to an invisible scale line.

Use the VerticalEdge enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top and Bottom.