All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Linear Gauge Overview

The Linear Gauge represents values on a linear scale.

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

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

Basic Usage

The following example demonstrates the Linear Gauge in action.

class LinearGaugeContainer extends React.Component {
    constructor(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">
                        pointer={{value: this.value}}
                        scale={{min: this.min, vertical: this.vertical}}
    <LinearGaugeContainer value={20} min={10} vertical={false}/>,
In this article