gauge  !size

A simple circular gauge indicator component.

!Preview

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

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

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

API

$3

Create a new Gauge component.

$3

Update gauge rings, marks & labels position.

$3

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.