Gauges in React using SVG
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add text. Jul 21, 2017
.babelrc Make Gauge distributable. Jul 15, 2017
.gitignore Make Gauge distributable. Jul 15, 2017
.npmignore Make Gauge distributable. Jul 15, 2017 Add README. Jul 17, 2017
package-lock.json 0.1.0 Jul 21, 2017
package.json 0.1.0 Jul 21, 2017
react-svg-gauge.iml Initial commit. Jul 14, 2017
webpack.config.js Make Gauge distributable. Jul 15, 2017
yarn.lock Make Gauge distributable. Jul 15, 2017

React Radial Gauge

Gauge 1 Gauge 2 Gauge 3

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


npm install react-radial-gauge


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