React CircularGauge - rangeContainer.ranges

An array of objects representing ranges contained in the range container.

Selector: Range
Type:

Array<Object>

Default Value: []
Cannot be used in themes.

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

color

Specifies the color of a range.

Selector: Color
Type:

String

|

ChartsColor

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(){
    $("#circularGaugeContainer").dxCircularGauge({
        // ...
        rangeContainer: {
            // ...
            rangeContainer: {
                ranges: [
                    { startValue: 0, endValue: 50, color: '#92000A' },
                    { startValue: 50, endValue: 100, color: { fillId: customPatternId } }
                ]
            }
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-circular-gauge ... >
    <dxo-range-container ... >
        <dxi-range [startValue]="0" [endValue]="50" color="#92000A"></dxi-range>
        <dxi-range [startValue]="50" [endValue]="100" [color]="fill">
    </dxo-range-container>
</dx-circular-gauge>
// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
}
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxCircularGauge ... >
        <DxRangeContainer ... >
            <DxRange
                :start-value="0"
                :end-value="50"
                color="#92000A"
            />
            <DxRange
                :start-value="50"
                :end-value="100"
                :color="fill"
            />
        </DxRangeContainer>
    </DxCircularGauge>
</template>

<script>
import DxCircularGauge, { DxRangeContainer, DxRange } from 'devextreme-vue/circular-gauge'; 
// ...

export default {
    components: {
        DxCircularGauge,
        DxRangeContainer,
        DxRange
    },
    data() {
        return {
            // ...
            fill: {
                fillId: this.customPatternId
            }
        }
    }
}
</script>
<template>
    <DxCircularGauge ... >
        <DxRangeContainer ... >
            <DxRange
                :start-value="0"
                :end-value="50"
                color="#92000A"
            />
            <DxRange
                :start-value="50"
                :end-value="100"
                :color="fill"
            />
        </DxRangeContainer>
    </DxCircularGauge>
</template>

<script setup>
import DxCircularGauge, { DxRangeContainer, DxRange } from 'devextreme-vue/circular-gauge';
// ...

const fill = {
    fillId: customPatternId
};
</script>
React
App.js
import React from 'react';
import CircularGauge, { RangeContainer, Range } from 'devextreme-react/circular-gauge';

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

export default function App() { 
    return ( 
        <CircularGauge ... >
            <RangeContainer ... >
                <Range startValue={0} endValue={50} color="#92000A" />
                <Range startValue={50} endValue={100} color={fill} />
            </RangeContainer>
        </CircularGauge>        
    ); 
}

endValue

Specifies an end value of a range.

Type:

Number

startValue

Specifies a start value of a range.

Type:

Number