rangeContainer

Specifies gauge range container options.

Type:

Object

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.

Show Example:
jQuery

In this example, a number of options within the rangeContainer configuration object is changed. The range container is divided into ranges that are defined by the ranges option. These ranges are moved from the scale to a 5-pixel distance using the offset option. In addition, the backgroundColor option is set to firebrick.


                                    

                                    

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:

Show Example:
jQuery

In this example, the range container's backgroundColor option is set to darkseagreen.


                                    

                                    

offset

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

Type:

Number

Default Value: 0
Show Example:
jQuery

In this example, the range container is moved from the scale to a 5-pixel distance using the offset option.


                                    

                                    

orientation

Specifies the orientation of the range container in the CircularGauge widget.

Type:

String

Default Value: 'outside'
Accepted Values: 'center' | 'inside' | 'outside'

This property specifies the range container's orientation relative to the 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.

When using the widget as an ASP.NET MVC Control, specify this option using the CircularGaugeElementOrientation enum. This enum accepts the following values: Outside, Inside and Center.

Show Example:
jQuery

Change the orientation option using the drop-down menu under the gauge.


                                    

                                    

palette

Specifies the palette to be used for colorizing ranges in the range container.

Type:

Array<String>

|

String

Default Value: 'Material'
Accepted Values: 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office'

This option accepts either the name of a predefined palette or an array of colors. The array can include the following colors:

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.

View Demo

See Also
Show Example:
jQuery

Use the drop-down menu below to change the palette used in the gauge.


                                    

                                    

paletteExtensionMode

Specifies what to do with colors in the palette when their number is less than the number of ranges in the range container.

Type:

String

Default Value: 'blend'
Accepted Values: 'alternate' | 'blend' | 'extrapolate'

The following variants are available:

  • "blend"
    Create a blend of two neighboring colors and insert it between these colors in the palette.

  • "alternate"
    Repeat the full set of palette colors, alternating their normal, lightened, and darkened shades in that order.

  • "extrapolate"
    Repeat the full set of palette colors, changing their shade gradually from dark to light.

ranges

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

Type:

Array<Object>

Default Value: []
Cannot be used in themes.

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.

Show Example:
jQuery

This example shows how to divide the gauge range container into ranges and display these ranges in different colors.


                                    

                                    

width

Specifies the range container's width in pixels.

Type:

Number

Default Value: 5

Show Example:
jQuery

In this example, the range container is displayed with a 15-pixel width.