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

LinearGauge Overview

The LinearGauge represents values on a linear scale.

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

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

Basic Usage

The following example demonstrates the LinearGauge in action.

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')
);
In this article