gauge

A simple circular gauge indicator component.

Live demo.

Installation

$ npm install component-gauge

Or use standalone browser version gauge.min.js, using global Gague class.

Don’t forget to include index.css and arrow.svg.

Example

var Gauge = require('component-gauge');
var q = require('query');

var gauge = new Gauge(q('.gauge'), options);

API

new Gauge(el, options)

Create a new Gauge component.

Gauge.prototype.update()

Update gauge rings, marks & labels position.

Gauge.prototype.value

Current gauge percent value, 0..100.

Options

| Param | Default | Description | |---|---|---| | angle | [150, 390] | Start and end angles defining gauge’s aperture | | values | {0: 'start', 100: 'end'} | Dict of labels corresponding to percentage values | | colors | {0:'gray', 70:'orange', 90:'red'} | Dict of colors corresponding to percentage values | | marks | [0,10,..100] | List of marks, corresponding to percentage | | value | 0 | Initial value |

CSS

There are a bunch of styles you can tack to adjust gauge view. Look into index.css. For example, you can adjust arrow shape and visibility, inset/outset of values and marks.