Skip to content
master
Switch branches/tags
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

About

Gauges in React using SVG

Resources

Releases

No releases published

Packages

No packages published