Gauges / ArcGauge / Center Template
material theme

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.

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

In this article

 /