@progress/kendo-gauges-react-wrapper/docs/radialgauge.md

Kendo UI Gauges wrapper for React

---
title: RadialGauge
page_title: Overview - RadialGauge - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI RadialGauge delivers and use the wrapper in React projects."
slug: overview_radialgauge
position: 2
---

# RadialGauge Overview

The RadialGauge represents values on a circular arc.

All graphics render on the client in the [Scalable Vector Graphics (SVG)](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) format.

The RadialGauge wrapper for React is a client-side wrapper for the [Kendo UI RadialGauge](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge) widget.

## Basic Usage

The following example demonstrates the RadialGauge in action.

```jsx-preview
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')
);
```

## Suggested Links

* [Kendo UI RadialGauge for jQuery](https://docs.telerik.com/kendo-ui/controls/gauges/radialgauge/overview)
* [API Reference of the RadialGauge Widget](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge)