Angular LinearGauge - RangeBar

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

Type:

Object

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
    )
)

View Demo

backgroundColor

Specifies the background color for the indicator of the rangeBar type.

Type:

String

Default Value: 'none'

This property supports the following colors:

baseValue

Specifies the base value for the indicator of the rangeBar type.

Type:

Number

| undefined
Default Value: undefined
Cannot be used in themes.

By default, a range bar starts from the beginning of the gauge scale. If you need to draw the range bar starting from a specific scale value, assign the required value to the baseValue property. In this instance, the range bar will display the range from the baseValue to the main gauge value.

View Demo

color

Specifies the color of the indicator.

Type:

String

|

ChartsColor

Default Value: '#CBC5CF'

This property supports the following colors:

You can also specify a custom pattern or gradient instead of a plain color. Call the registerPattern() or registerGradient() method to obtain a fill ID. Assign that value to the fillId field.

jQuery
index.js
$(function(){
    $("#linearGaugeContainer").dxLinearGauge({
        // ...
        valueIndicator: {
            // ...
            color: {
                fillId: customPatternId
            }
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-linear-gauge ... >
    <dxo-value-indicator [color]="fill">
    </dxo-value-indicator>
</dx-linear-gauge>
// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
}
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxLinearGauge ... >
        <DxValueIndicator
            :color="fill"
        />
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, { DxValueIndicator } from 'devextreme-vue/linear-gauge'; 
// ...

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    },
    data() {
        return {
            // ...
            fill: {
                fillId: this.customPatternId
            }
        }
    }
}
</script>
<template>
    <DxLinearGauge ... >
        <DxValueIndicator
            :color="fill"
        />
    </DxLinearGauge>
</template>

<script setup>
import DxLinearGauge, { DxValueIndicator } from 'devextreme-vue/linear-gauge'; 
// ...

const fill = {
    fillId: customPatternId
};
</script>
React
App.js
import React from 'react';
import LinearGauge, { ValueIndicator } from 'devextreme-react/linear-gauge';

// ...
const fill = {
    fillId: customPatternId
};

export default function App() { 
    return ( 
        <LinearGauge ... >
            <ValueIndicator color={fill} />
        </LinearGauge>        
    ); 
}

horizontalOrientation

Specifies the orientation of the rangeBar indicator. Applies only if the geometry.orientation property is "vertical".

Type:

HorizontalEdge

Default Value: 'left' (subvalue indicators), 'right' (value indicators)

This property specifies the orientation of the indicator relative to an invisible scale line.

offset

Specifies the distance between the indicator and the invisible scale line.

Type:

Number

Default Value: 10

CircularGauge Demo LinearGauge Demo

palette

Sets the palette to be used to colorize indicators differently.

Type:

Array<String>

|

Palette

Default Value: 'Material'

This property accepts either the name of a predefined palette or an array of colors. The array can include the following colors:

size

Specifies the range bar size for an indicator of the rangeBar type.

Type:

Number

Default Value: 10

text

Specifies the appearance of the text displayed in an indicator of the rangeBar type.

Selector: dxo-text
Type:

Object

Note that the indent property of the text configuration object must not be set to 0 if you need to show the text.

verticalOrientation

Specifies the orientation of the rangeBar indicator. Applies only if the geometry.orientation property is "horizontal".

Type:

VerticalEdge

Default Value: 'bottom' (value indicators), 'top' (subvalue indicators)

This property specifies the orientation of an indicator relative to an invisible scale line.