rangeContainer

Specifies options of the gauge's range container.

Type: Object

In addition to the individual values indicated by needles, you can indicate different ranges on the scale. For instance, you can indicate the range of warm and cold temperatures in a circular gauge representing a thermometer. To set 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

Specifies a range container's background color.

Type: String
Default Value: '#808080'

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 (not supported in Internet Explorer 8)
  • Predefined/Cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)

horizontalOrientation

Specifies the orientation of the range container on a vertically oriented LinearGauge widget.

Type: String
Default Value: 'right'
Accepted Values: 'left' | 'center' | 'right'

This property specifies the range container's orientation relative to an invisible scale line.
When setting up a range container, apply the required orientation first, to check that the result responds to your needs. Then, set the required offset from the invisible scale line to shift the range container.

offset

Specifies the offset of the range container from an invisible scale line in pixels.

Type: Number
Default Value: 0

ranges[]

An array of objects representing ranges contained in the range container.

Type: Array
Default Value: []

Ranges allow you to mark certain value ranges in the gauge. Visually, the ranges are displayed as bars along scales. To define ranges, introduce the ranges array. Specify a start value, an end value and a color for each range.

verticalOrientation

Specifies the orientation of a range container on a horizontal LinearGauge widget.

Type: String
Default Value: 'bottom'
Accepted Values: 'top' | 'middle' | 'bottom'

This property specifies the orientation of scale ticks relative to an invisible scale line.
When setting up a range container, apply the required orientation first to check that the result responds to your needs. Then, set the required offset from the invisible scale line to shift the range container.

width

Specifies the width of the range container's start and end boundaries in the LinearGauge widget.

Type: Object|Number

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.