Gauges / LinearGauge / Scale Ranges
material theme

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')
);

In this article

 /