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,
	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} />