Free Trial Buy

Rectangle

An object defining a gauge indicator of the rectangle type.

Type:

Object

jQuery
index.js
$(function() {
    $("#linearGauge").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rectangle",
            // The rest of the indicator options go here
        }
    });
});
Angular
HTML
TypeScript
<dx-linear-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rectangle"          
        <!-- The rest of the indicator options 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 options 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 options 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 options go here
    )
)

View Demo

color

Specifies a color of the indicator.

Type:

String

Default Value: '#C2C2C2'

This option supports the following colors:

length

Specifies the indicator length.

Type:

Number

Default Value: 15

offset

Specifies the distance between the indicator and the invisible scale line.

Type:

Number

Default Value: 2.5

CircularGauge Demo View Demo

palette

Sets the palette to be used to colorize indicators differently.

Type:

Array<String>

|

String

Default Value: 'Material'
Accepted Values: 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office'

This option accepts either the name of a predefined palette or an array of colors. The array can include the following colors:

Use the VizPalette enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Default, SoftPastel, HarmonyLight, Pastel, Bright, Soft, Ocean, Vintage, Violet, Carmine, DarkMoon, SoftBlue, DarkViolet, and GreenMist.

width

Specifies the width of an indicator in pixels.

Type:

Number

Default Value: 15