React LinearGauge - RangeBar

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

Type:

jQuery

index.js

$(function() {
    $("#linearGauge").dxLinearGauge({
        value: 40,
        valueIndicator: {
            type: "rangeBar",
        },
        subvalueIndicator: {
            type: "rangeBar",
        },
    });
});

Angular

app.component.html

app.module.ts

<dx-linear-gauge [value]="40">
    <dxo-linear-gauge-value-indicator
        type="rangeBar"
    ></dxo-linear-gauge-value-indicator>
    <dxo-linear-gauge-subvalue-indicator
        type="rangeBar"
    ></dxo-linear-gauge-subvalue-indicator>
</dx-linear-gauge>

import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator
            type="rangeBar"
        />
        <DxSubvalueIndicator
            type="rangeBar"
        />
    </DxLinearGauge>
</template>

<script setup lang="ts">
import { DxLinearGauge, DxValueIndicator, DxSubvalueIndicator } from 'devextreme-vue/linear-gauge';

</script>

React

App.tsx

import { LinearGauge, ValueIndicator, SubvalueIndicator } from 'devextreme-react/linear-gauge';

function App(): JSX.Element {
    return (
        <LinearGauge value={40}>
            <ValueIndicator
                type="rangeBar"
            />
            <SubvalueIndicator
                type="rangeBar"
            />
        </LinearGauge>
    );
}

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().LinearGauge()
    .ID("linearGauge")
    .Value(40)
    .ValueIndicator(vi => vi.Type(GaugeIndicatorType.RangeBar))
    .SubvalueIndicator(svi => svi.Type(GaugeIndicatorType.RangeBar))
)

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:

Hexadecimal colors
RGB colors
RGBA colors
Predefined/cross-browser color names
Predefined SVG colors
Paint server address

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:

Hexadecimal colors
RGB colors
RGBA colors
Predefined/cross-browser color names
Predefined SVG colors
Paint server address

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-linear-gauge-value-indicator [color]="fill">
    </dxo-linear-gauge-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>        
    ); 
}