Configuration geometry

Specifies the options required to set the geometry of the dxLinearGauge widget.

Type: Object

Show Example:
jQuery

In this example, the gauge is oriented vertically.

<div id="linearGaugeContainer" style="height:600px;width:500px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        valueIndicator: { color: 'yellowgreen' },
        value: 32,
        geometry: {
            orientation: 'vertical'
        }
    });
});

orientation

Indicates whether to display the dxLinearGauge widget vertically or horizontally.

Type: String
Default Value: 'horizontal'
Accepted Values: 'horizontal' | 'vertical'

Show Example:
jQuery

In this example, you can change the gauge orientation using the drop-down menu under the gauge.

<div id="linearGaugeContainer" style="height:500px;width: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">
    Gauge orientation:
    <select id="dropdownListSelector">
        <option value="horizontal">horizontal</option>
        <option value="vertical">vertical</option>
    </select>
</div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        valueIndicator: { color: 'yellowgreen' },
        value: 32,
        geometry: {
            orientation: 'horizontal'
        }
    });

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