rangeContainer ranges[]

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

Type: Array
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.

<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
    });
})