React 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: { // or subvalueIndicator
            type: "rangeBar",
            // The rest of the indicator properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rangeBar"          
        <!-- The rest of the indicator properties 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 properties 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 properties 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 properties 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 properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rectangleNeedle"          
        <!-- The rest of the indicator properties 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 properties 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 properties 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 properties 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 properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="textCloud"          
        <!-- The rest of the indicator properties 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 properties 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 properties 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 properties 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 properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="triangleMarker"          
        <!-- The rest of the indicator properties 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 properties 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 properties 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 properties 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 properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="triangleNeedle"          
        <!-- The rest of the indicator properties 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 properties 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 properties 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 properties 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 properties go here
        }
    });
});
Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="twoColorNeedle"          
        <!-- The rest of the indicator properties 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 properties 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 properties 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 properties go here
    )
)

View Demo