Skip to content

vraa/react-radial-gauge

Repository files navigation

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

Releases

No releases published

Packages

No packages published