React LinearGauge - rangeContainer
For the purpose of more intelligible data visualization, you can combine values into ranges and color each range differently. For instance, you can indicate the range of warm and cold temperatures. To set the ranges, assign an array of objects defining the ranges to the ranges property of the rangeContainer configuration object. In addition, you can specify the orientation of the ranges relative to an invisible scale line, and an offset from this line using the rangeContainer properties.
backgroundColor
The background color is used to indicate the area reserved for the range container in the gauge. This color is replaced with the colors of the ranges contained in the range container.
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
horizontalOrientation
Specifies the orientation of the range container. Applies only if the geometry.orientation option is "vertical".
This option specifies the range container orientation relative to an invisible scale line.
When using the widget as an ASP.NET MVC Control, specify this option using the HorizontalAlignment
enum. This enum accepts the following values: Left
, Center
and Right
.
palette
Sets the name of the palette or an array of colors to be used for coloring the gauge range container.
Use this option to set a predefined or custom palette. The colors listed in the specified palette will be used to draw ranges of the range container. If the number of the ranges is greater than the number of colors in the palette, palette colors are repeated, but slightly modified.
You can override the color of an individual range by specifying the color option of this range's configuration object. In addition, you can declare an array of colors and use it as a palette. Refer to the Palettes topic for more information on palettes.
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
.
verticalOrientation
Specifies the orientation of the range container. Applies only if the geometry.orientation option is "horizontal".
This option specifies the range container orientation relative to an invisible scale line.
When using the widget as an ASP.NET MVC Control, specify this option using the VerticalAlignment
enum. This enum accepts the following values: Top
, Center
and Bottom
.
width
If you need the LinearGauge widget range container to be rectangular, set the width of its start/end boundary for this property. If you need the range container to be triangular, assign an object to the width property. Set 0 to the start/end property of the width object and the required numeric value to the width object's end/start property. If you need the range container to be trapezoid, set the required values to the start and end properties of the width object.
If you have technical questions, please create a support ticket in the DevExpress Support Center.