Vue LinearGauge - Rectangle

An object defining a gauge indicator of the rectangle type.

Type:

Object

jQuery
JavaScript
HTML
$(function() {
    $("#linearGaugeContainer").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rectangle",
            // ...
            // The rest of the indicator options go here
            // ...
        }
    });
});
<div id="linearGaugeContainer"></div>
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
    ],
    // ...
})
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'

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