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

Kendo UI Gauges wrapper for React

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

# LinearGauge Overview

The LinearGauge represents values on a linear scale.

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

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

## Basic Usage

The following example demonstrates the LinearGauge in action.

```jsx-preview
class LinearGaugeContainer extends React.Component {
    constructor(props) {
        super(props);
        this.value = props.value;
        this.min = props.min;
        this.vertical = props.vertical;   
    }

    render() {
        return (
            <div className="example-wrapper">
                <div className="col-xs-12 col-sm-6 example-col">
                    <LinearGauge
                        pointer={{value: this.value}}
                        scale={{min: this.min, vertical: this.vertical}}
                    />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <LinearGaugeContainer value={20} min={10} vertical={false}/>,
    document.querySelector('my-app')
);
```

## Suggested Links

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