React LinearGauge - 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:

App.js
  • import React from 'react';
  • import LinearGauge, { RangeContainer, Range } from 'devextreme-react/linear-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 (
  • <LinearGauge ... >
  • <RangeContainer ... >
  • <Range startValue={0} endValue={50} color="#92000A" />
  • <Range startValue={50} endValue={100} color={fill} />
  • </RangeContainer>
  • </LinearGauge>
  • );
  • }