All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

RadialGauge Overview

The RadialGauge represents values on a circular arc.

All graphics render on the client in the Scalable Vector Graphics (SVG) format.

The RadialGauge wrapper for React is a client-side wrapper for the Kendo UI RadialGauge widget.

Basic Usage

The following example demonstrates the RadialGauge in action.

class RadialGaugeContainer extends React.Component {
    constructor(props) {
        super(props);     
        this.value = props.value;
        this.startAngle = props.startAngle;
        this.endAngle = props.endAngle;
    }

    render() {
        return (
            <div className="example-wrapper">
                <div className="col-xs-12 col-sm-6 example-col">
                    <RadialGauge
                        pointer={{value: this.value}}
                        scale={{startAngle: this.startAngle, endAngle: this.endAngle}}
                    />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <RadialGaugeContainer value={25} startAngle={90} endAngle={180}/>,
    document.querySelector('my-app')
);
In this article