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="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        valueIndicator: { type: 'rhombus' },
        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: 38
    });
})

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="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        valueIndicator: { type: 'rhombus' },
        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: 59
    });
})

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="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        valueIndicator: { type: 'circle' },
        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="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        valueIndicator: { type: 'circle' },
        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: 91
    });
})