0.1.2 • Published 6 years ago
react-gauge-test v0.1.2
Gauge
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
Param | Default | Description |
---|---|---|
radius | 175 | Main arc radius |
arcStrokeWidth | 3 | Width of main arc |
tickOffset | 7 | Offset between main arc and ticks |
tickStrokeWidth | 2 | Width of big ticks |
tickLength | 5 | Length of big ticks |
miniTickLength | 1 | Length of mini ticks |
miniTickStrokeWidth | 1 | Width of mini ticks |
scaleDivisionNumber | 10 | Number of divisions between big ticks |
tickLabelOffset | 10 | Offset between big tick and tick label |
centralCircleRadius | 10 | Radius of central circle |
isInnerNumbers | false | Tick labels position |
arrowValue | 0 | Value 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 |
aperture | 80 | Gap on main arc |
contentWidth | 450 | Width and height of inner image |
svgContainerWidth | 450 | Svg container width |
svgContainerHeight | 450 | Svg container height |