Center Template
You can customize the content inside the center of the ArcGauge by using the center template.
To render the center template of an ArcGauge, pass a function to the arcCenterRender property which accepts value and color arguments.
- Example
- View Source
- Open In Stackblitz
import * as React from 'react';
import * as ReactDOM from 'react-dom';
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 = [
{
to: 25,
color: '#0058e9'
}, {
from: 25,
to: 50,
color: '#37b400'
}, {
from: 50,
to: 75,
color: '#ffc000'
}, {
from: 75,
color: '#f31700'
}
];
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')
);