react-gauges

This library provides a set of reusable gauge components for use in React applications.

Installation

To install the library, run the following command:

npm install react-gauges

Usage

To use the library in your React application, import the desired gauge component and pass in the necessary props. Here's an example of how to use the SimpleGauge component:

import { SimpleGauge } from "react-gauges";

function App() {
  return (
    <div>
      <SimpleGauge value={50} />
    </div>
  );
}

import { SimpleGauge } from "react-gauges";

function App() {
  return (
    <div>
      <SimpleGauge value={50} borderType="square" indicatorVisible={false} />
    </div>
  );
}

import { SimpleGauge } from "react-gauges";

function App() {
  return (
    <div>
      <SimpleGauge value={50} isTotal={true} />
    </div>
  );
}

Options

Option	type	Description	Example
value	number	The value to display on the gauge	value={75}
minLimit	number	The minimum value of the gauge	minLimit={0}
maxLimit	number	The maximum value of the gauge	maxLimit={100}
barColor	string	The color of the gauge bar	barColor="#00ff00"
barBaseColor	string	The color of the gauge bar base	barBaseColor="#000000"
barWidth	number	The width of the gauge bar	barWidth={10}
labelColor	string	The color of the gauge label	labelColor="#000000"
labelFontSize	string	The font size of the gauge label	labelFontSize="1rem"
labelFontFamily	string	The font family of the gauge label	labelFontFamily="Arial"
labelFontWeight	string	The font weight of the gauge label	labelFontWeight="bold"
labelTemplate	string	The template of the gauge label	labelTemplate="{value}%"
indicatorColor	string	The color of the gauge indicator	indicatorColor="#000000"
indicatorVisible	boolean	Whether or not the gauge indicator is visible	indicatorVisible={true}
isTotal	boolean	Whether or not the gauge is a total	isTotal={true}
borderType	string	The type of border, "round", "square", "butt"	borderType="square"

License

MIT © kevinjpuscan