0.1.2 • Published 6 years ago

react-gauge-test v0.1.2

Weekly downloads
6
License
MIT
Repository
github
Last release
6 years ago

Gauge

Live demo.

Installation

$ npm i --save react-gauge-test

Example

$ cd node_modules/react-gauge-test/
$ npm i
$ npm run build-example

Then open example/index.html

var React = require('react');
var ReactDOM = require('react-dom');
var ReactGauge = require('react-gauge-test');

ReactDOM.render(
    React.createElement(ReactGauge, options),
    document.querySelector('.container')  
);

Options

ParamDefaultDescription
radius175Main arc radius
arcStrokeWidth3Width of main arc
tickOffset7Offset between main arc and ticks
tickStrokeWidth2Width of big ticks
tickLength5Length of big ticks
miniTickLength1Length of mini ticks
miniTickStrokeWidth1Width of mini ticks
scaleDivisionNumber10Number of divisions between big ticks
tickLabelOffset10Offset between big tick and tick label
centralCircleRadius10Radius of central circle
isInnerNumbersfalseTick labels position
arrowValue0Value of gauge
marks[0, 1, 2, 3, 4, 5, 6]Tick labels values
ranges[{ start: 0, end: 4.5/6, color: "#666" }, { start: 4.5/6, end: 5.5/6, color: "#ffa500" }, { start: 5.5/6, end: 1, color: "#ff0000" }]Array of color intervals
aperture80Gap on main arc
contentWidth450Width and height of inner image
svgContainerWidth450Svg container width
svgContainerHeight450Svg container height

NPM