Orientation

You can render the LinearGauge either vertically or horizontally.

By default, the LinearGauge is rendered vertically. To change its orientation, set the scale.vertical option to false.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

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

class LinearGaugeComponent extends React.Component {
    render() {
        const linearOptions = {
            pointer: {
                value: 10,
                color: '#ffd246'
            }
        };

        const verticalLinearOptions = {
            pointer: {
                value: 10,
                color: '#28b4c8'
            },
            scale: {
                vertical: false
            }
        };

        return (
            <div className="row">
                <div className="col-sm-12 col-md-6">
                    <LinearGauge {...linearOptions} />
                </div>
                <div className="col-sm-12 col-md-6">
                    <LinearGauge {...verticalLinearOptions} />
                </div>
            </div>
        );
    }
}

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

In this article