react-gauge-capacity v2.0.1

react-gauge-capacity

Installation

$ npm install --save react-gauge-capacity

Example

import React, { Component } from "react";
import ReactGauge from "react-gauge-capacity";

let contWidth = 360;
let contHeight = 200;
let gaugeRadius = 125;
let centerLineHeight = 35;

/***************************
 ** Set following variable to make gauge meter responsive
 */
if (window.innerWidth <= 420 && window.innerWidth > 375) {
  contWidth = 340;
  contHeight = 190;
  gaugeRadius = 120;
  centerLineHeight = 30;
} else if (window.innerWidth <= 375 && window.innerWidth > 320) {
  contWidth = 300;
  contHeight = 170;
  gaugeRadius = 100;
  centerLineHeight = 30;
} else if (window.innerWidth <= 320) {
  contWidth = 260;
  contHeight = 155;
  gaugeRadius = 85;
  centerLineHeight = 20;
}
/****************************/

let options = {
  isInnerNumbers: false,
  aperture: 180,
  radius: gaugeRadius,
  tickOffset: 20,
  arcStrokeWidth: 40,
  miniTickLength: 1,
  miniTickStrokeWidth: 1,
  tickLabelOffset: 12,
  scaleDivisionNumber: 5,
  centralCircleRadius: 10,
  marks: [
    "-100%",
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    "-20%",
    "-10%",
    "C",
    "10%",
    "20%",
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    "100%",
  ],
  contentWidth: contWidth,
  svgContainerWidth: contWidth,
  svgContainerHeight: contHeight,
  arrowValue: 86 / 180,
  arrowColor: "#354357",
  gaugeCenterLineHeight: centerLineHeight,
  viewBox: "30 0 300 200",
  ranges: [
    {
      start: 0,
      end: 72 / 180,
      color: "#f3595b",
    },
    {
      start: 72 / 180,
      end: 81 / 180,
      color: "#ffc875",
    },
    {
      start: 81 / 180,
      end: 90 / 180,
      color: "#83d7c0",
    },
    {
      start: 90 / 180,
      end: 90 / 180,
      color: "#83d7c0",
    },
    {
      start: 90 / 180,
      end: 99 / 180,
      color: "#83d7c0",
    },
    {
      start: 99 / 180,
      end: 108 / 180,
      color: "#ffc875",
    },
    {
      start: 108 / 180,
      end: 180 / 180,
      color: "#f3595b",
    },
  ],
};
<ReactGauge {...options} />;

Options