react-svg-gauge-fork-custom
v1.0.3
Published
Original author Tim de Koning. Justgage inspired .svg gauge for React. This is customized version of react-svg-gauge. I added gradient color fill and value label adjustment.
Downloads
2
Maintainers
Readme
FORK of original React SVG Gauge(https://reggino.github.io/react-svg-gauge) by Tim de Koning https://github.com/Reggino
Simple SVG Gauge component, inspired by JustGage
Demo
Sample implementation
import React, { Component } from 'react';
import Gauge from 'react-svg-gauge';
export default class App extends Component {
render() {
return (
<div>
<Gauge value={this.state.value} width={400} height={320} label="This is my Gauge" />
</div>
);
}
}
Options
- label (default: "React SVG Gauge")
- min (default: 0)
- max (default: 100)
- value (default: 40)
- width (default: : 400)
- height (default: 320)
- color (default: '#fe0400')
- backgroundColor (default: '#edebeb')
- topLabelStyle (style object)
- valueLabelStyle (style object)
- minMaxLabelStyle(style object)
Styling can be done via Style
-properties, or by applying CSS to SVG Text elements.