React LinearGauge - rangeContainer.ranges
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.
color
Selector: Color
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.
App.js
- import React from 'react';
- import LinearGauge, { RangeContainer, Range } from 'devextreme-react/linear-gauge';
- // ...
- const fill = {
- fillId: customPatternId
- };
- export default function App() {
- return (
- <LinearGauge ... >
- <RangeContainer ... >
- <Range startValue={0} endValue={50} color="#92000A" />
- <Range startValue={50} endValue={100} color={fill} />
- </RangeContainer>
- </LinearGauge>
- );
- }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.