Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-canvas-gauge with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactCanvasGauge = require("react-canvas-gauge")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-canvas-gauge v1.0.2

React Gauge Component

react-canvas-gauge

NPM version npm download

image

Quick start

Installing via npm

$ npm install --save-dev react-canvas-gauge

Example

import React, { Component } from 'react';
import Gauge from 'react-canvas-gauge';

class MyGauge extends Component {
  render() {
    return (<Gauge />);
  }
}

export default MyGauge;

Props

name type default
style object {}
theme string: 'light' , 'dark' 'light'
mode string: 'gauge', 'progress' 'gauge'
size number 128
enableAnimation bool true
animationTimeout number 250
enableColorful bool true
title string ''
unit string ''
scaleList array [{scale:10,quantity:5,startColor:'#ff2a04',endColor:'orange'},{scale:10,quantity:5,startColor:'orange',endColor:'#32cd32'}]
minValue number 0
value number 0

See the examples for a more complete sample.

Running Local Example

$ git clone https://github.com/neilpipi1985/react-canvas-gauge
$ cd ./react-canvas-gauge
$ npm install
$ npm run test
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free