JavaScript/jQuery LinearGauge Indicator Types

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

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

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

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

View Demo

RangeBar

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

Type:

Object

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

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

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

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

View Demo

Rectangle

An object defining a gauge indicator of the rectangle type.

Type:

Object

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

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

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

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

View Demo

Rhombus

An object defining a gauge indicator of the rhombus type.

Type:

Object

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

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

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

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

View Demo

TextCloud

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

Type:

Object

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

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

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

function App(): JSX.Element {
    return (
        <LinearGauge value={40}>
            <ValueIndicator
                type="textCloud"
            />
            <SubvalueIndicator
                type="textCloud"
            />
        </LinearGauge>
    );
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().LinearGauge()
    .ID("linearGauge")
    .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() {
    $("#linearGauge").dxLinearGauge({
        value: 40,
        valueIndicator: {
            type: "triangleMarker",
        },
        subvalueIndicator: {
            type: "triangleMarker",
        },
    });
});
Angular
app.component.html
app.module.ts
<dx-linear-gauge [value]="40">
    <dxo-linear-gauge-value-indicator
        type="triangleMarker"
    ></dxo-linear-gauge-value-indicator>
    <dxo-linear-gauge-subvalue-indicator
        type="triangleMarker"
    ></dxo-linear-gauge-subvalue-indicator>
</dx-linear-gauge>
import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator
            type="triangleMarker"
        />
        <DxSubvalueIndicator
            type="triangleMarker"
        />
    </DxLinearGauge>
</template>

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

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

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

View Demo