Vue LinearGauge Indicator Types

This section lists objects that define options used to configure value and subvalue indicators of specific types.

View Demo

Circle

An object that defines a gauge indicator of the circle type.

Type:

Object

jQuery
JavaScript
HTML
$(function() {
    $("#linearGaugeContainer").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "circle",
            // ...
            // 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="circle"
        <!-- ... -->
        <!-- 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.Circle)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo

RangeBar

An object that defines a gauge indicator of the rangeBar type.

Type:

Object

jQuery
JavaScript
HTML
$(function() {
    $("#linearGaugeContainer").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rangeBar",
            // ...
            // 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="rangeBar"
        <!-- ... -->
        <!-- 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.RangeBar)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo

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

Rhombus

An object defining a gauge indicator of the rhombus type.

Type:

Object

jQuery
JavaScript
HTML
$(function() {
    $("#linearGaugeContainer").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rhombus",
            // ...
            // 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="rhombus"
        <!-- ... -->
        <!-- 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.Rhombus)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo

TextCloud

An object that defines a gauge indicator of the textCloud type.

Type:

Object

jQuery
JavaScript
HTML
$(function() {
    $("#linearGaugeContainer").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "textCloud",
            // ...
            // 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="textCloud"
        <!-- ... -->
        <!-- 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.TextCloud)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo

TriangleMarker

An object that defines a gauge indicator of the triangleMarker type.

Type:

Object

jQuery
JavaScript
HTML
$(function() {
    $("#linearGaugeContainer").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "triangleMarker",
            // ...
            // 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="triangleMarker"
        <!-- ... -->
        <!-- 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.TriangleMarker)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo