Gauges / LinearGauge / Multiple Pointers
material theme

Multiple Pointers

The LinearGauge enables you to highlight multiple values by rendering multiple pointers.

To set multiple pointers to a LinearGauge, pass an array of pointers to the pointer property.

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',
                shape: 'arrow'
            }, {
                value: 20,
                color: '#28b4c8',
                shape: 'arrow'
            }, {
                value: 30,
                color: '#78d237',
                shape: 'arrow'
            } ]
        };

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

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

In this article

 /