Scale Ranges
The LinearGauge enables you to highlight specific value ranges on the scale by setting them in different colors.
To configure the scale colors, set the ranges
property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
LinearGauge
} from '@progress/kendo-react-gauges';
class LinearGaugeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0
};
}
componentDidMount() {
setInterval(
() => {
this.setState({
value: Math.ceil(Math.random() * 180)
});
},
1000);
}
render() {
const linearOptions = {
value: this.state.value,
shape: 'arrow',
scale: {
minorUnit: 5,
majorUnit: 20,
max: 180,
ranges: [
{ from: 80, to: 120, color: '#ffc700' },
{ from: 120, to: 150, color: '#ff7a00' },
{ from: 150, to: 180, color: '#c20000' }
]
}
};
return (
<LinearGauge {...linearOptions} />
);
}
}
ReactDOM.render(
<LinearGaugeComponent />,
document.querySelector('my-app')
);