Vue LinearGauge - rangeContainer

For the purpose of more intelligible data visualization, you can combine values into ranges and color each range differently. For instance, you can indicate the range of warm and cold temperatures. To set the ranges, assign an array of objects defining the ranges to the ranges property of the rangeContainer configuration object. In addition, you can specify the orientation of the ranges relative to an invisible scale line, and an offset from this line using the rangeContainer properties.

The background color is used to indicate the area reserved for the range container in the gauge. This color is replaced with the colors of the ranges contained in the range container.

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.

$(function(){
    $("#linearGaugeContainer").dxLinearGauge({
        // ...
        rangeContainer: {
            // ...
            backgroundColor: {
                fillId: customPatternId
            }
        }
    });
});

<dx-linear-gauge ... >
    <dxo-range-container [backgroundColor]="fill">
        <!-- ... -->
    </dxo-range-container>
</dx-linear-gauge>

// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
} 

<template>
    <DxLinearGauge ... >
        <DxRangeContainer
            :background-color="fill"
        >
            <!-- ... -->
        </DxRangeContainer>
    </DxLinearGauge>
</template>

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

export default {
    components: {
        DxLinearGauge,
        DxRangeContainer
    },
    data() {
        return {
            // ...
            fill: {
                fillId: this.customPatternId
            }
        }
    }
}
</script>

<template>
    <DxLinearGauge ... >
        <DxRangeContainer
            :background-color="fill"
        >
            <!-- ... -->
        </DxRangeContainer>
    </DxLinearGauge>
</template>

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

const fill = {
    fillId: customPatternId
};
</script>

import React from 'react';
import LinearGauge, { RangeContainer } from 'devextreme-react/linear-gauge';

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

export default function App() { 
    return ( 
        <LinearGauge ... >
            <RangeContainer backgroundColor={fill}>
                {/* ... */}
            </RangeContainer>
        </LinearGauge>        
    ); 
} 

This property specifies the range container orientation relative to an invisible scale line.

View Demo

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

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors

View Demo

See Also

• Palettes
• paletteExtensionMode
• DevExpress.viz.generateColors(palette, count, options)
• rangeContainer.ranges[].color

The following variants are available:

• "blend"
  Create a blend of two neighboring colors and insert it between these colors in the palette.

• "alternate"
  Repeat the full set of palette colors, alternating their normal, lightened, and darkened shades in that order.

• "extrapolate"
  Repeat the full set of palette colors, changing their shade gradually from dark to light.

View Demo

Ranges allow you to mark certain value ranges in the gauge. Visually, the ranges are displayed as bars along scales. To define ranges, introduce the ranges array. Specify a start value, an end value and a color for each range.

View Demo

This property specifies the range container orientation relative to an invisible scale line.

If you need the LinearGauge UI component range container to be rectangular, set the width of its start/end boundary for this property. If you need the range container to be triangular, assign an object to the width property. Set 0 to the start/end property of the width object and the required numeric value to the width object's end/start property. If you need the range container to be trapezoid, set the required values to the start and end properties of the width object.