Rectangle

An object defining a gauge indicator of the rectangle type.

Type:

jQuery

index.js

$(function() {
    $("#linearGauge").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rectangle",
            // The rest of the indicator properties go here
        }
    });
});

Angular

HTML

TypeScript

<dx-linear-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rectangle"          
        <!-- The rest of the indicator properties go here -->
    ></dxo-value-indicator>
<dx-linear-gauge>

import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="rectangle"
            <!-- The rest of the indicator properties go here -->
        /> 
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, {
    DxValueIndicator
} from 'devextreme-vue/linear-gauge';

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    }
}
</script>

React

App.js

import React from 'react';

import LinearGauge, {
    ValueIndicator
} from 'devextreme-react/linear-gauge';

class App extends React.Component {
    render() {
        return (
            <LinearGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="rectangle"
                    {/* The rest of the indicator properties go here */}
                />
            </LinearGauge>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().LinearGauge()
    .ID("linearGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.Rectangle)
        // The rest of the indicator properties go here
    )
)

View Demo