Color Ranges

The ArcGauge enables you to set different colors depending on the current value.

To configure the range colors, set the colors property.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
    ArcGauge
} from '@progress/kendo-react-gauges';

class ArcGaugeComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: 0
        };
    }

    componentDidMount() {
        setInterval(
            () => {
                this.setState({
                    value: Math.ceil(Math.random() * 100)
                });
            },
            1000);
    }
    render() {
        const colors = [
            {
                to: 25,
                color: '#0058e9'
            }, {
                from: 25,
                to: 50,
                color: '#37b400'
            }, {
                from: 50,
                to: 75,
                color: '#ffc000'
            }, {
                from: 75,
                color: '#f31700'
            }
        ];

        const arcOptions = {
            value: this.state.value,
            colors
        };

        return (
            <ArcGauge {...arcOptions} />
        );
    }
}

ReactDOM.render(
    <ArcGaugeComponent />,
    document.querySelector('my-app')
);

In this article