JavaScript/jQuery CircularGauge Indicator Types
This section lists objects that define properties used to configure value and subvalue indicators of specific types.
RangeBar
An object that defines a gauge indicator of the rangeBar type.
Type:
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
)
)RectangleNeedle
An object that defines a gauge indicator of the rectangleNeedle type.
Type:
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
)
)TextCloud
An object that defines a gauge indicator of the textCloud type.
Type:
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
)
)TriangleMarker
An object that defines a gauge indicator of the triangleMarker type.
Type:
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
)
)TriangleNeedle
An object that defines a gauge indicator of the triangleNeedle type.
Type:
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
)
)TwoColorNeedle
An object that defines a gauge indicator of the twoColorNeedle type.
Type:
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
)
)Feedback