React CircularGauge - Customize Appearance

You can use the following properties to colorize gauge elements:

You can also add a custom pattern or gradient fill to the elements. Use the registerPattern() or registerGradient() method to create a custom pattern or gradient.

The following example adds a gradient to one of the ranges in a gauge:

jQuery
index.js
const registerGradient = DevExpress.common.charts.registerGradient;

$(function(){
    $("#circularGaugeContainer").dxCircularGauge({
        // ...
        rangeContainer: {
            // ...
            rangeContainer: {
                ranges: [
                    { startValue: 0, endValue: 50, color: '#92000A' },
                    { startValue: 50, endValue: 100, color: { 
                        fillId: registerGradient("linear", {
                            colors: [{
                                offset: "20%",
                                color: "#97c95c"
                            }, {
                                offset: "90%",
                                color: "#eb3573"
                            }]
                        }) 
                    } }
                ]
            }
        }
    });
});
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>
import { registerGradient } from "devextreme/common/charts";

export class AppComponent {
    // ...

    fill = {
        fillId: registerGradient("linear", {
            colors: [{
                offset: "20%",
                color: "#97c95c"
            }, {
                offset: "90%",
                color: "#eb3573"
            }]
        });
    };
}
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'; 
    import { registerGradient } from 'devextreme/common/charts';
    // ...

    export default {
        components: {
            DxCircularGauge,
            DxRangeContainer,
            DxRange
        },
        data() {
            return {
                // ...
                fill: {
                    fillId: registerGradient("linear", {
                        colors: [{
                            offset: "20%",
                            color: "#97c95c"
                        }, {
                            offset: "90%",
                            color: "#eb3573"
                        }]
                    });
                }
            }
        }
    }
</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';
    import { registerGradient } from 'devextreme/common/charts';
    // ...

    const fill = {
        fillId: registerGradient("linear", {
            colors: [{
                offset: "20%",
                color: "#97c95c"
            }, {
                offset: "90%",
                color: "#eb3573"
            }]
        });
    };
</script>
React
App.js
import React from 'react';
import CircularGauge, { RangeContainer, Range } from 'devextreme-react/circular-gauge';
import { registerGradient } from 'devextreme/common/charts';

// ...
const fill = {
    fillId: registerGradient("linear", {
        colors: [{
            offset: "20%",
            color: "#97c95c"
        }, {
            offset: "90%",
            color: "#eb3573"
        }]
    });
};

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