A newer version of this page is available. Switch to the current version.

jQuery LinearGauge Indicator Types

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

Circle

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

Type:

Object

jQuery
index.js
$(function() {
    $("#linearGauge").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "circle",
            // The rest of the indicator properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-linear-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="circle"          
        <!-- The rest of the indicator properties go here -->
    ></dxo-value-indicator>
<dx-linear-gauge>
import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="circle"
            <!-- The rest of the indicator properties go here -->
        /> 
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, {
    DxValueIndicator
} from 'devextreme-vue/linear-gauge';

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    }
}
</script>
React
App.js
import React from 'react';

import LinearGauge, {
    ValueIndicator
} from 'devextreme-react/linear-gauge';

class App extends React.Component {
    render() {
        return (
            <LinearGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="circle"
                    {/* The rest of the indicator properties go here */}
                />
            </LinearGauge>
        );
    }
}
export default App;
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 properties go here
    )
)

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: { // or subvalueIndicator
            type: "rangeBar",
            // The rest of the indicator properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-linear-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rangeBar"          
        <!-- The rest of the indicator properties go here -->
    ></dxo-value-indicator>
<dx-linear-gauge>
import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="rangeBar"
            <!-- The rest of the indicator properties go here -->
        /> 
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, {
    DxValueIndicator
} from 'devextreme-vue/linear-gauge';

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    }
}
</script>
React
App.js
import React from 'react';

import LinearGauge, {
    ValueIndicator
} from 'devextreme-react/linear-gauge';

class App extends React.Component {
    render() {
        return (
            <LinearGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="rangeBar"
                    {/* The rest of the indicator properties go here */}
                />
            </LinearGauge>
        );
    }
}
export default App;
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 properties go here
    )
)

View Demo

Rectangle

An object defining a gauge indicator of the rectangle type.

Type:

Object

jQuery
index.js
$(function() {
    $("#linearGauge").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rectangle",
            // The rest of the indicator properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-linear-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rectangle"          
        <!-- The rest of the indicator properties go here -->
    ></dxo-value-indicator>
<dx-linear-gauge>
import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="rectangle"
            <!-- The rest of the indicator properties go here -->
        /> 
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, {
    DxValueIndicator
} from 'devextreme-vue/linear-gauge';

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    }
}
</script>
React
App.js
import React from 'react';

import LinearGauge, {
    ValueIndicator
} from 'devextreme-react/linear-gauge';

class App extends React.Component {
    render() {
        return (
            <LinearGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="rectangle"
                    {/* The rest of the indicator properties go here */}
                />
            </LinearGauge>
        );
    }
}
export default App;
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 properties go here
    )
)

View Demo

Rhombus

An object defining a gauge indicator of the rhombus type.

Type:

Object

jQuery
index.js
$(function() {
    $("#linearGauge").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rhombus",
            // The rest of the indicator properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-linear-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rhombus"          
        <!-- The rest of the indicator properties go here -->
    ></dxo-value-indicator>
<dx-linear-gauge>
import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="rhombus"
            <!-- The rest of the indicator properties go here -->
        /> 
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, {
    DxValueIndicator
} from 'devextreme-vue/linear-gauge';

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    }
}
</script>
React
App.js
import React from 'react';

import LinearGauge, {
    ValueIndicator
} from 'devextreme-react/linear-gauge';

class App extends React.Component {
    render() {
        return (
            <LinearGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="rhombus"
                    {/* The rest of the indicator properties go here */}
                />
            </LinearGauge>
        );
    }
}
export default App;
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 properties go here
    )
)

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: { // or subvalueIndicator
            type: "textCloud",
            // The rest of the indicator properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-linear-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="textCloud"          
        <!-- The rest of the indicator properties go here -->
    ></dxo-value-indicator>
<dx-linear-gauge>
import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="textCloud"
            <!-- The rest of the indicator properties go here -->
        /> 
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, {
    DxValueIndicator
} from 'devextreme-vue/linear-gauge';

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    }
}
</script>
React
App.js
import React from 'react';

import LinearGauge, {
    ValueIndicator
} from 'devextreme-react/linear-gauge';

class App extends React.Component {
    render() {
        return (
            <LinearGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="textCloud"
                    {/* The rest of the indicator properties go here */}
                />
            </LinearGauge>
        );
    }
}
export default App;
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 properties go here
    )
)

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: { // or subvalueIndicator
            type: "triangleMarker",
            // The rest of the indicator properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-linear-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="triangleMarker"          
        <!-- The rest of the indicator properties go here -->
    ></dxo-value-indicator>
<dx-linear-gauge>
import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="triangleMarker"
            <!-- The rest of the indicator properties go here -->
        /> 
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, {
    DxValueIndicator
} from 'devextreme-vue/linear-gauge';

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    }
}
</script>
React
App.js
import React from 'react';

import LinearGauge, {
    ValueIndicator
} from 'devextreme-react/linear-gauge';

class App extends React.Component {
    render() {
        return (
            <LinearGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="triangleMarker"
                    {/* The rest of the indicator properties go here */}
                />
            </LinearGauge>
        );
    }
}
export default App;
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 properties go here
    )
)

View Demo