rangeContainer 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.

Show Example:
jQuery

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

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        scale: {
            startValue: 0,
            endValue: 100
        },
        rangeContainer: {
            ranges: [
                { startValue: 0, endValue: 20, color: 'dodgerblue' },
                { startValue: 20, endValue: 40, color: 'lightskyblue' },
                { startValue: 40, endValue: 60, color: 'yellow' },
                { startValue: 60, endValue: 80, color: 'orange' },
                { startValue: 80, endValue: 100, color: 'firebrick' }
            ]
        },
        value: 42
    });
})

color

Specifies a color of a range.

Type: String

This option supports the following colors.

Show Example:
jQuery

In this example, all ranges are drawn in different colors.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        scale: {
            startValue: 0,
            endValue: 100
        },
        rangeContainer: {
            ranges: [
                { startValue: 0, endValue: 20, color: 'dodgerblue' },
                { startValue: 20, endValue: 40, color: 'lightskyblue' },
                { startValue: 40, endValue: 60, color: 'yellow' },
                { startValue: 60, endValue: 80, color: 'orange' },
                { startValue: 80, endValue: 100, color: 'firebrick' }
            ]
        },
        value: 42
    });
})

endValue

Specifies an end value of a range.

Type: Number

Show Example:
jQuery

In this example, the range container is divided into five ranges, each of which is defined by the startValue and endValue fields.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        scale: {
            startValue: 0,
            endValue: 100
        },
        rangeContainer: {
            ranges: [
                { startValue: 0, endValue: 20, color: 'dodgerblue' },
                { startValue: 20, endValue: 40, color: 'lightskyblue' },
                { startValue: 40, endValue: 60, color: 'yellow' },
                { startValue: 60, endValue: 80, color: 'orange' },
                { startValue: 80, endValue: 100, color: 'firebrick' }
            ]
        },
        value: 42
    });
})

startValue

Specifies a start value of a range.

Type: Number

Show Example:
jQuery

In this example, the range container is divided into five ranges each of which is defined by the startValue and endValue fields.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        scale: {
            startValue: 0,
            endValue: 100
        },
        rangeContainer: {
            ranges: [
                { startValue: 0, endValue: 20, color: 'dodgerblue' },
                { startValue: 20, endValue: 40, color: 'lightskyblue' },
                { startValue: 40, endValue: 60, color: 'yellow' },
                { startValue: 60, endValue: 80, color: 'orange' },
                { startValue: 80, endValue: 100, color: 'firebrick' }
            ]
        },
        value: 42
    });
})