ArcGauge Overview
The ArcGauge represents a value on a circular arc.
While in ArcGauges the value is represented by a value range on the arc, in RadialGauges the specific value is indicated by the pointer.
Basic Usage
The following example demonstrates the ArcGauge in action.
import {
ArcGauge
} from '@progress/kendo-react-gauges';
class ArcGaugeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0
};
}
componentDidMount() {
setInterval(
() => {
this.setState({
value: Math.ceil(Math.random() * 100)
});
},
1000);
}
render() {
const colors = [
{from: 0, to: 25, color: 'red'},
{from: 25, to: 100, color: 'lime'}
];
const arcOptions = {
value: this.state.value,
colors
};
const arcCenterRenderer = (value, color) => {
return (<h3 style={{color: color}}>{value}%</h3>);
};
return (
<ArcGauge {...arcOptions} arcCenterRender={arcCenterRenderer} />
);
}
}
ReactDOM.render(
<ArcGaugeComponent />,
document.querySelector('my-app')
);