Scale Options

The RadialGauge enables you to customize the options of the scale.

For example, you can change the start and end angle, the appearance of the label and ticks, customize the ranges, and others. For the full list of options, refer to the API reference of the RadialGauge.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
    RadialGauge
} from '@progress/kendo-react-gauges';
import { NumericTextBox, Switch } from '@progress/kendo-react-inputs';

class RadialContainer extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            showLabels: true,
            showTicks: true,
            ticksColor: '#008000',
            labelsColor: '#0000ff',
            rangeSize: 10,
            rangeLineCap: 'round',
            rangeColor: '#ffcccc',
            startAngle: 0,
            endAngle: 180,
            reverse: false
        };
    }

    onFieldChange = (event, fieldName, parse) => {
        this.setState({
            [fieldName]: parse ? parseInt(event.target.value) : event.target.value
        });
    }

    onShowLabelChange = (e) => {
        this.onFieldChange(e, 'showLabels');
    }

    onShowTicksChange = (e) => {
        this.onFieldChange(e, 'showTicks');
    }

    onTicksColorChange = (e) => {
        this.onFieldChange(e, 'ticksColor');
    }

    onLabelsColorChange = (e) => {
        this.onFieldChange(e, 'labelsColor');
    }

    onRangeSizeChange = (e) => {
        this.onFieldChange(e, 'rangeSize', true);
    }

    onRangeLineCapChange = (e) => {
        this.onFieldChange(e, 'rangeLineCap');
    }

    onRangeColorChange = (e) => {
        this.onFieldChange(e, 'rangeColor');
    }

    onStartAngleChange = (e) => {
        this.onFieldChange(e, 'startAngle', true);
    }

    onEndAngleChange = (e) => {
        this.onFieldChange(e, 'endAngle', true);
    }

    onReverseChange = (e) => {
        this.onFieldChange(e, 'reverse');
    }

    render() {
        const {
            showLabels, showTicks, ticksColor, labelsColor, rangeSize, rangeLineCap,
            rangeColor, startAngle, endAngle, reverse
        } = this.state;

        return <div>
             <div className="example-config">
                <div className="row">
                    <div className="col-sm-12 col-md-3">
                        <label>
                            <Switch
                                 checked={showLabels}
                                 onChange={this.onShowLabelChange}
                            />
                            &nbsp;Show Labels
                        </label>
                    </div>
                    <div className="col-sm-12 col-md-3">
                        <label>
                            <Switch
                                 checked={showTicks}
                                 onChange={this.onShowTicksChange}
                            />
                            &nbsp;Show Ticks
                        </label>
                    </div>

                    <div className="col-sm-12 col-md-3">
                        <label>
                            <input
                                type="color"
                                value={ticksColor}
                                onChange={this.onTicksColorChange}
                            />
                            &nbsp;Ticks Color
                        </label>
                    </div>
                    <div className="col-sm-12 col-md-3">
                        <label>
                            <input
                                type="color"
                                value={labelsColor}
                                onChange={this.onLabelsColorChange}
                            />
                            &nbsp;Labels Color
                        </label>
                    </div>
                </div>
                <hr />
                <div className="row">
                    <div className="col-sm-12 col-md-6">
                        <label>
                            <NumericTextBox
                                width={80}
                                onChange={this.onRangeSizeChange}
                                value={rangeSize}
                                min="1"
                                max="30"
                            />
                            &nbsp;Range Size
                        </label>
                    </div>
                    <div className="col-sm-12 col-md-6">
                        <label>
                            <input
                                type="color"
                                value={rangeColor}
                                onChange={this.onRangeColorChange}
                            />
                            &nbsp;Range Color
                        </label>
                    </div>
                </div>
                <hr />
                <div className="row">
                    <div className="col-sm-12 col-md-6">
                        <label>
                            <input
                                type="range"
                                min="-90"
                                max="90"
                                value={startAngle}
                                style={{ verticalAlign: 'middle' }}
                                onChange={this.onStartAngleChange}
                            />
                            &nbsp;Start angle
                        </label>
                    </div>
                    <div className="col-sm-12 col-md-6">
                        <label>
                            <input
                                type="range"
                                min="90"
                                max="270"
                                value={endAngle}
                                style={{ verticalAlign: 'middle' }}
                                onChange={this.onEndAngleChange}
                            />
                            &nbsp;End angle
                        </label>
                    </div>
                </div>
                <hr />
                <label>
                    <Switch
                        checked={reverse}
                        onChange={this.onReverseChange}
                    />
                    &nbsp;Reverse
                </label>
            </div>
            <RadialGauge
                pointer={{
                    value: 30
                }}
                transitions={false}
                scale={{
                    labels: { format: 'c', color: labelsColor, visible: showLabels },
                    majorTicks: { visible: showTicks, color: ticksColor },
                    minorTicks: { visible: showTicks, color: ticksColor },
                    ticksColor,
                    rangeSize,
                    rangeLineCap,
                    startAngle,
                    endAngle,
                    reverse,
                    ranges: [ {
                        from: 0,
                        to: 50,
                        color: rangeColor
                    } ]
                }}/>
        </div >;
    }
}
ReactDOM.render(
    <RadialContainer />,
    document.querySelector('my-app')
);

In this article