/rgauge

Gauges in React using SVG

Primary LanguageJavaScript

React Radial Gauge 2

This is a fork of the original react-radial-gauge repository with some additional progress font options.

Gauge 1 Gauge 2 Gauge 3

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

Installation

npm install rgauge

Usage

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