All Components

This website hosts native Kendo UI components built from the ground up with the ultimate performance in mind and intended to be used in the React ecosystem.

LinearGauge Overview

The LinearGauge represents values on a linear scale.

Basic Usage

The following example demonstrates the LinearGauge in action.

import {
    LinearGauge
} from '@progress/kendo-react-gauges';

class LinearGaugeComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: 0
        };
    }

    componentDidMount() {
        setInterval(
            () => {
                this.setState({
                    value: Math.ceil(Math.random() * 50)
                });
            },
            1000);
    }

    render() {
        const linearOptions = {
            pointer: {
                value: this.state.value
            }
        };

        return (
            <LinearGauge {...linearOptions} />
        );
    }
}

ReactDOM.render(
    <LinearGaugeComponent />,
    document.querySelector('my-app')
);

Functionality and Features

In this article