JavaScript/jQuery CircularGauge Indicator Types

This section lists objects that define properties 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
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: {
            type: "rangeBar",
        },
        subvalueIndicator: {
            type: "rangeBar",
        },
    });
});
Angular
app.component.html
app.module.ts
<dx-circular-gauge [value]="40">
    <dxo-circular-gauge-value-indicator
        type="rangeBar"
    ></dxo-circular-gauge-value-indicator>
    <dxo-circular-gauge-subvalue-indicator
        type="rangeBar"
    ></dxo-circular-gauge-subvalue-indicator>
</dx-circular-gauge>
import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCircularGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator
            type="rangeBar"
        />
        <DxSubvalueIndicator
            type="rangeBar"
        />
    </DxCircularGauge>
</template>

<script setup lang="ts">
import { DxCircularGauge, DxValueIndicator, DxSubvalueIndicator } from 'devextreme-vue/circular-gauge';

</script>
React
App.tsx
import { CircularGauge, ValueIndicator, SubvalueIndicator } from 'devextreme-react/circular-gauge';

function App(): JSX.Element {
    return (
        <CircularGauge value={40}>
            <ValueIndicator
                type="rangeBar"
            />
            <SubvalueIndicator
                type="rangeBar"
            />
        </CircularGauge>
    );
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi.Type(GaugeIndicatorType.RangeBar))
    .SubvalueIndicator(svi => svi.Type(GaugeIndicatorType.RangeBar))
)

View Demo

RectangleNeedle

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

Type:

Object

jQuery
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: {
            type: "rectangleNeedle",
        },
        subvalueIndicator: {
            type: "rectangleNeedle",
        },
    });
});
Angular
app.component.html
app.module.ts
<dx-circular-gauge [value]="40">
    <dxo-circular-gauge-value-indicator
        type="rectangleNeedle"
    ></dxo-circular-gauge-value-indicator>
    <dxo-circular-gauge-subvalue-indicator
        type="rectangleNeedle"
    ></dxo-circular-gauge-subvalue-indicator>
</dx-circular-gauge>
import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCircularGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator
            type="rectangleNeedle"
        />
        <DxSubvalueIndicator
            type="rectangleNeedle"
        />
    </DxCircularGauge>
</template>

<script setup lang="ts">
import { DxCircularGauge, DxValueIndicator, DxSubvalueIndicator } from 'devextreme-vue/circular-gauge';

</script>
React
App.tsx
import { CircularGauge, ValueIndicator, SubvalueIndicator } from 'devextreme-react/circular-gauge';

function App(): JSX.Element {
    return (
        <CircularGauge value={40}>
            <ValueIndicator
                type="rectangleNeedle"
            />
            <SubvalueIndicator
                type="rectangleNeedle"
            />
        </CircularGauge>
    );
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi.Type(GaugeIndicatorType.RectangleNeedle))
    .SubvalueIndicator(svi => svi.Type(GaugeIndicatorType.RectangleNeedle))
)

View Demo

TextCloud

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

Type:

Object

jQuery
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: {
            type: "textCloud",
        },
        subvalueIndicator: {
            type: "textCloud",
        },
    });
});
Angular
app.component.html
app.module.ts
<dx-circular-gauge [value]="40">
    <dxo-circular-gauge-value-indicator
        type="textCloud"
    ></dxo-circular-gauge-value-indicator>
    <dxo-circular-gauge-subvalue-indicator
        type="textCloud"
    ></dxo-circular-gauge-subvalue-indicator>
</dx-circular-gauge>
import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCircularGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator
            type="textCloud"
        />
        <DxSubvalueIndicator
            type="textCloud"
        />
    </DxCircularGauge>
</template>

<script setup lang="ts">
import { DxCircularGauge, DxValueIndicator, DxSubvalueIndicator } from 'devextreme-vue/circular-gauge';

</script>
React
App.tsx
import { CircularGauge, ValueIndicator, SubvalueIndicator } from 'devextreme-react/circular-gauge';

function App(): JSX.Element {
    return (
        <CircularGauge value={40}>
            <ValueIndicator
                type="textCloud"
            />
            <SubvalueIndicator
                type="textCloud"
            />
        </CircularGauge>
    );
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi.Type(GaugeIndicatorType.TextCloud))
    .SubvalueIndicator(svi => svi.Type(GaugeIndicatorType.TextCloud))
)

View Demo

TriangleMarker

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

Type:

Object

jQuery
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: {
            type: "triangleMarker",
        },
        subvalueIndicator: {
            type: "triangleMarker",
        },
    });
});
Angular
app.component.html
app.module.ts
<dx-circular-gauge [value]="40">
    <dxo-circular-gauge-value-indicator
        type="triangleMarker"
    ></dxo-circular-gauge-value-indicator>
    <dxo-circular-gauge-subvalue-indicator
        type="triangleMarker"
    ></dxo-circular-gauge-subvalue-indicator>
</dx-circular-gauge>
import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCircularGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator
            type="triangleMarker"
        />
        <DxSubvalueIndicator
            type="triangleMarker"
        />
    </DxCircularGauge>
</template>

<script setup lang="ts">
import { DxCircularGauge, DxValueIndicator, DxSubvalueIndicator } from 'devextreme-vue/circular-gauge';

</script>
React
App.tsx
import { CircularGauge, ValueIndicator, SubvalueIndicator } from 'devextreme-react/circular-gauge';

function App(): JSX.Element {
    return (
        <CircularGauge value={40}>
            <ValueIndicator
                type="triangleMarker"
            />
            <SubvalueIndicator
                type="triangleMarker"
            />
        </CircularGauge>
    );
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi.Type(GaugeIndicatorType.TriangleMarker))
    .SubvalueIndicator(svi => svi.Type(GaugeIndicatorType.TriangleMarker))
)

View Demo

TriangleNeedle

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

Type:

Object

jQuery
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: {
            type: "triangleNeedle",
        },
        subvalueIndicator: {
            type: "triangleNeedle",
        },
    });
});
Angular
app.component.html
app.module.ts
<dx-circular-gauge [value]="40">
    <dxo-circular-gauge-value-indicator
        type="triangleNeedle"
    ></dxo-circular-gauge-value-indicator>
    <dxo-circular-gauge-subvalue-indicator
        type="triangleNeedle"
    ></dxo-circular-gauge-subvalue-indicator>
</dx-circular-gauge>
import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCircularGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator
            type="triangleNeedle"
        />
        <DxSubvalueIndicator
            type="triangleNeedle"
        />
    </DxCircularGauge>
</template>

<script setup lang="ts">
import { DxCircularGauge, DxValueIndicator, DxSubvalueIndicator } from 'devextreme-vue/circular-gauge';

</script>
React
App.tsx
import { CircularGauge, ValueIndicator, SubvalueIndicator } from 'devextreme-react/circular-gauge';

function App(): JSX.Element {
    return (
        <CircularGauge value={40}>
            <ValueIndicator
                type="triangleNeedle"
            />
            <SubvalueIndicator
                type="triangleNeedle"
            />
        </CircularGauge>
    );
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi.Type(GaugeIndicatorType.TriangleNeedle))
    .SubvalueIndicator(svi => svi.Type(GaugeIndicatorType.TriangleNeedle))
)

View Demo

TwoColorNeedle

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

Type:

Object

jQuery
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: {
            type: "twoColorNeedle",
        },
        subvalueIndicator: {
            type: "twoColorNeedle",
        },
    });
});
Angular
app.component.html
app.module.ts
<dx-circular-gauge [value]="40">
    <dxo-circular-gauge-value-indicator
        type="twoColorNeedle"
    ></dxo-circular-gauge-value-indicator>
    <dxo-circular-gauge-subvalue-indicator
        type="twoColorNeedle"
    ></dxo-circular-gauge-subvalue-indicator>
</dx-circular-gauge>
import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCircularGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator
            type="twoColorNeedle"
        />
        <DxSubvalueIndicator
            type="twoColorNeedle"
        />
    </DxCircularGauge>
</template>

<script setup lang="ts">
import { DxCircularGauge, DxValueIndicator, DxSubvalueIndicator } from 'devextreme-vue/circular-gauge';

</script>
React
App.tsx
import { CircularGauge, ValueIndicator, SubvalueIndicator } from 'devextreme-react/circular-gauge';

function App(): JSX.Element {
    return (
        <CircularGauge value={40}>
            <ValueIndicator
                type="twoColorNeedle"
            />
            <SubvalueIndicator
                type="twoColorNeedle"
            />
        </CircularGauge>
    );
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi.Type(GaugeIndicatorType.TwoColorNeedle))
    .SubvalueIndicator(svi => svi.Type(GaugeIndicatorType.TwoColorNeedle))
)

View Demo