Multiple Pointers

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

You can independently customize each pointer including its current value, color, and length. To set multiple pointers to a RadialGauge, pass an array of pointers to the pointer property.

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

class RadialGaugeComponent extends React.Component {
    render() {
        const radialOptions = {
            pointer: [{
                value: 10,
                color: '#ffd246'
            }, {
                value: 20,
                color: '#28b4c8'
            }, {
                value: 30,
                color: '#78d237'
            }]
        };

        return (
            <RadialGauge {...radialOptions} />
        );
    }
}

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

In this article