React Radial Gauge

Create beautiful gauges in React. Customize each part of the gauge components to your need.

Installation

npm install react-radial-gauge

Usage

import Gauge from 'react-radial-gauge';

class AwesomeComponent esteds React.Component {
    render() {
        let opts = {/* Gauge customization */}
        return (
            <Gauge {...opts} />
        )
    }
}

Customizing the Gauge

In order you see a demo of how to customize the Gauge, have a look at the online Gauge generator.

You can pass in the below props to the <Gauge/> component to customize the Radial Gauge look.

| prop | Description | Value | |------|-------------|------| | size | Size of the gauge. 200 Will render a 200x200 Gauge. | Integer | |currentValue | Gauges value. The progress and needle will be rendered according to this value. | Integer (1 to 100) | | dialWidth| Size of the radial dial| Integer | | dialColor| Color of the radial dial| Hex code | | progressWidth| Size of the progress bar | Integer | | progressColor| Color of the progress bar | Hex code | | tickLength| Length of the ticks | Integer| | tickWidth| Width of the ticks | Integer| | tickColor| Color of the ticks | Hex code | | needleColor| Color of the needle | Hex code | | needleBaseSize| Needle base size | Integer| | needleBaseColor| Needle base color | Hex code | | needleWidth| Width of the needle | Integer| | needleSharp| Should the needle be arrow or a line. If true, an arrow will be drawn, else a line.| true / false |