Vue CircularGauge Indicator Types

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

View Demo

RangeBar

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

Type:

Object

jQuery

JavaScript

HTML

$(function() {
    $("#circularGaugeContainer").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rangeBar",
            // ...
            // The rest of the indicator options go here
            // ...
        }
    });
});

<div id="circularGaugeContainer"></div>

Angular

HTML

TypeScript

<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rangeBar"
        <!-- ... -->
        <!-- The rest of the indicator options go here -->
        <!-- ... -->>
    </dxo-value-indicator>
</dx-circular-gauge>

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

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.RangeBar)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo

RectangleNeedle

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

Type:

Object

jQuery

JavaScript

HTML

$(function() {
    $("#circularGaugeContainer").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rectangleNeedle",
            // ...
            // The rest of the indicator options go here
            // ...
        }
    });
});

<div id="circularGaugeContainer"></div>

Angular

HTML

TypeScript

<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rectangleNeedle"
        <!-- ... -->
        <!-- The rest of the indicator options go here -->
        <!-- ... -->>
    </dxo-value-indicator>
</dx-circular-gauge>

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

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.RectangleNeedle)
        // ...
        // 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() {
    $("#circularGaugeContainer").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "textCloud",
            // ...
            // The rest of the indicator options go here
            // ...
        }
    });
});

<div id="circularGaugeContainer"></div>

Angular

HTML

TypeScript

<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="textCloud"
        <!-- ... -->
        <!-- The rest of the indicator options go here -->
        <!-- ... -->>
    </dxo-value-indicator>
</dx-circular-gauge>

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

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .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() {
    $("#circularGaugeContainer").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "triangleMarker",
            // ...
            // The rest of the indicator options go here
            // ...
        }
    });
});

<div id="circularGaugeContainer"></div>

Angular

HTML

TypeScript

<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="triangleMarker"
        <!-- ... -->
        <!-- The rest of the indicator options go here -->
        <!-- ... -->>
    </dxo-value-indicator>
</dx-circular-gauge>

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

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.TriangleMarker)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo

TriangleNeedle

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

Type:

Object

jQuery

JavaScript

HTML

$(function() {
    $("#circularGaugeContainer").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "triangleNeedle",
            // ...
            // The rest of the indicator options go here
            // ...
        }
    });
});

<div id="circularGaugeContainer"></div>

Angular

HTML

TypeScript

<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="triangleNeedle"
        <!-- ... -->
        <!-- The rest of the indicator options go here -->
        <!-- ... -->>
    </dxo-value-indicator>
</dx-circular-gauge>

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

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.TriangleNeedle)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo

TwoColorNeedle

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

Type:

Object

jQuery

JavaScript

HTML

$(function() {
    $("#circularGaugeContainer").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "twoColorNeedle",
            // ...
            // The rest of the indicator options go here
            // ...
        }
    });
});

<div id="circularGaugeContainer"></div>

Angular

HTML

TypeScript

<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="twoColorNeedle"
        <!-- ... -->
        <!-- The rest of the indicator options go here -->
        <!-- ... -->>
    </dxo-value-indicator>
</dx-circular-gauge>

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

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.TwoColorNeedle)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo