0.1.1 • Published 5 years ago

react-radial-gauge v0.1.1

Weekly downloads
60
License
ISC
Repository
github
Last release
5 years ago

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.

propDescriptionValue
sizeSize of the gauge. 200 Will render a 200x200 Gauge.Integer
currentValueGauges value. The progress and needle will be rendered according to this value.Integer (1 to 100)
dialWidthSize of the radial dialInteger
dialColorColor of the radial dialHex code
progressWidthSize of the progress barInteger
progressColorColor of the progress barHex code
tickLengthLength of the ticksInteger
tickWidthWidth of the ticksInteger
tickColorColor of the ticksHex code
needleColorColor of the needleHex code
needleBaseSizeNeedle base sizeInteger
needleBaseColorNeedle base colorHex code
needleWidthWidth of the needleInteger
needleSharpShould the needle be arrow or a line. If true, an arrow will be drawn, else a line.true / false
0.1.1

5 years ago

0.2.0

6 years ago

0.1.0

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago