Skip to content

Latest commit

 

History

History
53 lines (38 loc) · 1.73 KB

README.md

File metadata and controls

53 lines (38 loc) · 1.73 KB

React Radial Gauge

Gauge 1 Gauge 2 Gauge 3

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