jqwidgets-scripts-custom/demos/React/app/bargauge/autochangevalue/app.js

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

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

import JqxBarGauge from '../../../jqwidgets-react/react_jqxbargauge.js';

class App extends React.Component {
    componentDidMount() {
        this.refs.myBarGauge.on('drawEnd', () => {
            let values = [];
            values[0] = this.getRandomInt(1, 99);
            setTimeout(() => {
                this.refs.myBarGauge.val(values);
            }, 1000);
        });
    }

    getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    };

    render() {

        let barGaugePalette = ['#307DD7', '#AA4643', '#89A54E', '#71588F', '#4198AF'];

        let formatFunction = (value, index, color) => {
            if (value < 20) {
                return barGaugePalette[0];
            }
            if (value < 40) {
                return barGaugePalette[1];
            }
            if (value < 60) {
                return barGaugePalette[2];
            }
            if (value < 80) {
                return barGaugePalette[3];
            }
            if (value <= 100) {
                return barGaugePalette[4];
            }
        };

        return (
            <JqxBarGauge ref='myBarGauge'
                width={'100%'} height={600} values={[25]}
                relativeInnerRadius={0.6} formatFunction={formatFunction}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));