Beautiful React Hook For Gauge Charts – use-gauge

A React hook to help you create beautiful, animated, SVG based gauges.

How to use it:

1. Install and import the use-gauge.

# Yarn
$ yarn add use-gauge

# NPM
$ npm i use-gauge

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useGauge } from '../.';

2. Invoke the useGauge hook with the following parameters:

const {
  ticks,
  valueToAngle,
  angleToValue,
  getTickProps,
  getLabelProps,
  getArcProps,
  getNeedleProps,
  getSVGProps,
} = useGauge({
  startAngle: 90,// 0-360
  endAngle: 270
  numTicks, // the number of ticks
  diameter, // diameter of the gauge
  domain: [minValue, maxValue], // Min and max values for your gauge
});

Preview:

Download Details:

Author: mattrothenberg

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/mattrothenberg/use-gauge

License: MIT