A newer version of this page is available. Switch to the current version.

jQuery 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

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 a color of the indicator.

Type:

String

Default Value: '#CBC5CF'

This property supports the following colors:

horizontalOrientation

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

Type:

String

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

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

palette

Sets the palette to be used to colorize indicators differently.

Type:

Array<String>

|

String

Default Value: 'Material'
Accepted Values: 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office'

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.

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:

String

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

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