All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

jQuery CircularGauge Indicator Types

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

RangeBar

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

Type:

Object

jQuery
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rangeBar",
            // The rest of the indicator options go here
        }
    });
});
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="rangeBar"
            <!-- The rest of the indicator options go here -->
        /> 
    </DxCircularGauge>
</template>

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

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

import CircularGauge, {
    ValueIndicator
} from 'devextreme-react/circular-gauge';

class App extends React.Component {
    render() {
        return (
            <CircularGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="rangeBar"
                    {/* The rest of the indicator options go here */}
                />
            </CircularGauge>
        );
    }
}
export default App;
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
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rectangleNeedle",
            // The rest of the indicator options go here
        }
    });
});
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="rectangleNeedle"
            <!-- The rest of the indicator options go here -->
        /> 
    </DxCircularGauge>
</template>

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

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

import CircularGauge, {
    ValueIndicator
} from 'devextreme-react/circular-gauge';

class App extends React.Component {
    render() {
        return (
            <CircularGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="rectangleNeedle"
                    {/* The rest of the indicator options go here */}
                />
            </CircularGauge>
        );
    }
}
export default App;
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
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "textCloud",
            // The rest of the indicator options go here
        }
    });
});
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="textCloud"
            <!-- The rest of the indicator options go here -->
        /> 
    </DxCircularGauge>
</template>

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

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

import CircularGauge, {
    ValueIndicator
} from 'devextreme-react/circular-gauge';

class App extends React.Component {
    render() {
        return (
            <CircularGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="textCloud"
                    {/* The rest of the indicator options go here */}
                />
            </CircularGauge>
        );
    }
}
export default App;
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
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "triangleMarker",
            // The rest of the indicator options go here
        }
    });
});
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="triangleMarker"
            <!-- The rest of the indicator options go here -->
        /> 
    </DxCircularGauge>
</template>

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

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

import CircularGauge, {
    ValueIndicator
} from 'devextreme-react/circular-gauge';

class App extends React.Component {
    render() {
        return (
            <CircularGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="triangleMarker"
                    {/* The rest of the indicator options go here */}
                />
            </CircularGauge>
        );
    }
}
export default App;
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
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "triangleNeedle",
            // The rest of the indicator options go here
        }
    });
});
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="triangleNeedle"
            <!-- The rest of the indicator options go here -->
        /> 
    </DxCircularGauge>
</template>

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

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

import CircularGauge, {
    ValueIndicator
} from 'devextreme-react/circular-gauge';

class App extends React.Component {
    render() {
        return (
            <CircularGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="triangleNeedle"
                    {/* The rest of the indicator options go here */}
                />
            </CircularGauge>
        );
    }
}
export default App;
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
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "twoColorNeedle",
            // The rest of the indicator options go here
        }
    });
});
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="twoColorNeedle"
            <!-- The rest of the indicator options go here -->
        /> 
    </DxCircularGauge>
</template>

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

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

import CircularGauge, {
    ValueIndicator
} from 'devextreme-react/circular-gauge';

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