React CircularGauge - subvalueIndicator

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

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

View Demo

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.

View Demo

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

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

When using the widget as an ASP.NET MVC Control, specify this option using the HorizontalEdge enum. This enum accepts the following values: Left and Right.

CircularGauge Demo View Demo

Use this option to color subvalue indicators. If the number of colors in the specified array is less than the number of subvalue indicators, the colors are repeated, but slightly modified.

If you need to draw all subvalue indicators in one color, specify the subvalueIndicator.color option.

When using the widget as an ASP.NET MVC Control, you can specify this option using the VizPalette enum. This enum accepts the following values: Default, SoftPastel, HarmonyLight, Pastel, Bright, Soft, Ocean, Vintage, Violet, Carmine, DarkMoon, SoftBlue, DarkViolet and GreenMist.

When you use a twoColorNeedle 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.

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

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

Different options of the subvalueIndicator configuration object can be set for different types of the subvalue indicators. These options are listed within the Indicator Types section.

When using the widget as an ASP.NET MVC Control, specify this option using the GaugeIndicatorType enum. This enum accepts the following values: RectangleNeedle, TriangleNeedle, TwoColorNeedle, RangeBar, TriangleMarker and TextCloud.

View Demo

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

When using the widget as an ASP.NET MVC Control, specify this option using the VerticalEdge enum. This enum accepts the following values: Top and Bottom.