JavaScript/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:
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
)
)RangeBar
An object that defines a gauge indicator of the rangeBar type.
Type:
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
)
)Rectangle
An object defining a gauge indicator of the rectangle type.
Type:
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
)
)Rhombus
An object defining a gauge indicator of the rhombus type.
Type:
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
)
)TextCloud
An object that defines a gauge indicator of the textCloud type.
Type:
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
)
)TriangleMarker
An object that defines a gauge indicator of the triangleMarker type.
Type:
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
)
)Feedback