Gauges / ArcGauge / Getting Started
material theme

Getting Started with KendoReact ArcGauge

The KendoReact ArcGauge represents value ranges on the arc.

The KendoReact ArcGauge component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-gauges package.

Basic Usage

The following example demonstrates the ArcGauge in action.

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 = [
            { from: 0, to: 25, color: 'red' },
            { from: 25, to: 100, color: 'lime' }
        ];

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

        const arcCenterRenderer = (value, color) => {
            return (<h3 style={{ color: color }}>{value}%</h3>);
        };

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

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

Functionality and Features

 /