0.1.3 • Published 5 years ago
rgauge v0.1.3
React Radial Gauge 2
This is a fork of the original react-radial-gauge repository with some additional progress font options.
Create beautiful gauges in React. Customize each part of the gauge components to your need.
Installation
npm install rgaugeUsage
import Gauge from 'rgauge';
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 |
| progressFontColor | What color should the text be for current value. | Hex code |
| progressFontSize | How big should the text be for the current value. | Integer |
| progressFontPosition | Should the progress text be positioned in the center or the bottom of the gauge. | "center / false |