Angular LinearGauge Indicator Types
This section lists objects that define properties used to configure value and subvalue indicators of specific types.
Circle
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
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
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
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
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
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 ) )
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.