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

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function() {
    $('#linearGaugeContainer').dxLinearGauge({
        scale: {
            startValue: 0,
            endValue: 100,
            majorTick: {
                visible: true,
                color: 'black'
            },
            minorTick: {
                visible: true,
                color: 'black'
            }
        },
        valueIndicator: { type: 'rectangle', color: 'royalblue' },
        rangeContainer: {
            backgroundColor: 'firebrick',
            offset: 5,
            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' }
            ]
        },
        value: 42
    });
})

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.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        scale: {
            startValue: 0,
            endValue: 100,
            minorTick: { visible: true }
        },
        valueIndicator: { type: 'rhombus' },
        rangeContainer: {
            backgroundColor: 'darkseagreen'
        },
        value: 42
    });
})

horizontalOrientation

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

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

This option specifies the range container orientation relative to an invisible scale line.

NOTE: The horizontalOrientation option requires the gauge to be vertical. Assign "vertical" to the geometry | orientation option to display the gauge vertically.

Show Example:
jQuery

In this example, you can change the horizontalOrientation option of the range container using the drop-down menu under the gauge.

<div id="linearGaugeContainer" style="height:500px;margin:0 auto"></div>
<div id="selectContainer" style="height:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Range container's <b>horizontalOrientation</b>:
    <select id="dropdownListSelector">
        <option value="right">right</option>
        <option value="left">left</option>
        <option value="center">center</option>
    </select>
</div>
$(function() {
    $('#linearGaugeContainer').dxLinearGauge({
        scale: {
            majorTick: { color: 'black' }
        },
        geometry: { orientation: 'vertical' },
        valueIndicator: { type: 'rectangle', color: 'royalblue' },
        rangeContainer: {
            backgroundColor: 'lightskyblue',
            horizontalOrientation: 'right'
        },
        value: 81
    });

    $('#dropdownListSelector').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            rangeContainer: {
                horizontalOrientation: this.value
            }
        });
    });
})

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.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function() {
    $('#linearGaugeContainer').dxLinearGauge({
        scale: {
            startValue: 0,
            endValue: 100,
            majorTick: {
                visible: true,
                color: 'black'
            },
            minorTick: {
                visible: true,
                color: 'black'
            }
        },
        valueIndicator: { type: 'rhombus' },
        rangeContainer: {
            offset: 5
        },
        value: 42
    });
})

palette

Sets the name of the palette or an array of colors to be used for coloring the gauge range container.

Type: Array|String
Default Value: 'default'
Accepted Values: 'Default' | 'Soft Pastel' | 'Harmony Light' | 'Pastel' | 'Bright' | 'Soft' | 'Ocean' | 'Vintage' | 'Violet'

Use this option to set a predefined or custom palette. The colors listed in the specified palette will be used to draw ranges of the range container. If the number of the ranges is greater than the number of colors in the palette, palette colors are repeated, but slightly modified.

You can override the color of an individual range by specifying the color option of this range's configuration object. In addition, you can declare an array of colors and use it as a palette. Refer to the Palettes topic for more information on palettes.

Show Example:
jQuery

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

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0px auto"></div>
<div id="selectContainer" style="height:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Palette:
    <select id="dropdownListSelector">
        <option value="Default">Default</option>
        <option value="Soft Pastel">Soft Pastel</option>
        <option value="Harmony Light">Harmony Light</option>
        <option value="Pastel">Pastel</option>
        <option value="Bright">Bright</option>
        <option value="Soft">Soft</option>
        <option value="Ocean">Ocean</option>
        <option value="Vintage">Vintage</option>
        <option value="Violet">Violet</option>
    </select>
</div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        scale: {
            startValue: 0,
            endValue: 100,
            majorTick: {
                visible: true,
                color: 'black'
            },
            minorTick: {
                visible: true,
                color: 'black'
            }
        },
        rangeContainer: {
            offset: 5,
            palette: 'Default',
            ranges: [
                { startValue: 0, endValue: 20 },
                { startValue: 20, endValue: 40 },
                { startValue: 40, endValue: 60 },
                { startValue: 60, endValue: 80 },
                { startValue: 80, endValue: 100 }
            ]
        },
        value: 42
    });

    $('#dropdownListSelector').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            rangeContainer: {
                palette: this.value
            }
        });
    });
});

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

verticalOrientation

Specifies the orientation of a range container on a horizontally oriented dxLinearGauge widget.

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

This option specifies the range container orientation relative to an invisible scale line.

NOTE: The verticalOrientation option requires the gauge to be horizontal. Assign "horizontal" to the geometry | orientation option to display the gauge horizontally.

Show Example:
jQuery

In this example, you can change the verticalOrientation option of the range container using the drop-down menu under the gauge.

<div id="linearGaugeContainer" style="height:150px;width:700px;margin:0 auto"></div>
<div id="selectContainer" style="height:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Range container's <b>verticalOrientation</b>:
    <select id="dropdownListSelector">
        <option value="bottom">bottom</option>
        <option value="middle">middle</option>
        <option value="top">top</option>
    </select>
</div>
$(function() {
    $('#linearGaugeContainer').dxLinearGauge({
        scale: {
            majorTick: { color: 'black' }
        },
        geometry: { orientation: 'horizontal' },
        valueIndicator: { type: 'rectangle', color: 'royalblue' },
        rangeContainer: {
            backgroundColor: 'orange',
            verticalOrientation: 'bottom'
        },
        value: 81
    });

    $('#dropdownListSelector').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            rangeContainer: {
                verticalOrientation: this.value
            }
        });
    });
})

width

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

Type: Object|Number

If you need the dxLinearGauge 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.

Show Example:
jQuery

This example shows the range container that is rectangular in shape. The width of this container is set using the width option.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        scale: {
            minorTick: { visible: true }
        },
        valueIndicator: { type: 'rhombus', color: 'orangered' },
        rangeContainer: {
            backgroundColor: 'firebrick',
            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' }
            ],
            width: 25
        },
        value: 54
    });
})