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')
);