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

end

Specifies an end width of a range container.

Type: Number
Default Value: 5

Show Example:
jQuery

In this example, the range container has the shape of a trapezoid, which can be made using the start and end fields of the width configuration object set to different values.

<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: { start: 20, end: 50 }
        },
        value: 54
    });
})

start

Specifies a start width of a range container.

Type: Number
Default Value: 5

Show Example:
jQuery

This example shows the range container in the shape of a triangle. Here, this shape is created using the start field of the width configuration object that is set to 0.

<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: { start: 0, end: 30 }
        },
        value: 54
    });
})