react-svg-gauge
TypeScript icon, indicating that this package has built-in type declarations

1.0.10 • Public • Published

React SVG Gauge

Simple SVG Gauge component, inspired by JustGage

Demo

Sample Gauge

https://reggino.github.io/react-svg-gauge

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)
  • valueFormatter (function (number) => string)

Styling can be done via Style-properties, or by applying CSS to SVG Text elements.

Package Sidebar

Install

npm i react-svg-gauge

Weekly Downloads

2,505

Version

1.0.10

License

MIT

Unpacked Size

49.1 kB

Total Files

23

Last publish

Collaborators

  • reggino