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 * as React from 'react';
import * as ReactDOM from 'react-dom';

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