Gauges / RadialGauge / Getting Started
material theme

Getting Started with KendoReact RadialGauge

The KendoReact RadialGauge represents values on a circular arc.

The KendoReact RadialGauge is distributed through NPM under the kendo-react-gauges package.

The RadialGauge component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

Basic Usage

The following example demonstrates the RadialGauge in action.

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

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

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

        this.state = {
            value: 0
        };
    }

    componentDidMount() {
        setInterval(
            () => {
                this.setState({
                    value: Math.ceil(Math.random() * 100)
                });
            },
            1000);
    }

    render() {
        const radialOptions = {
            pointer: {
                value: this.state.value
            }
        };

        return (
            <RadialGauge {...radialOptions} />
        );
    }
}

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

Functionality and Features

Is this article helpful?

Not finding the help you need?

Contact Support