Scale Ranges

Copy Codeimport * 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')
);