{"library":"react-gauge-component","title":"React Gauge Component","description":"react-gauge-component is a customizable React component designed for displaying gauge charts, often used for data visualization like speedometers or Grafana-style gauges. The current stable version is 2.0.28, with frequent patch and minor updates within the 2.x series. It was forked from `@Martin36/react-gauge-chart` and significantly re-architected in its v2 release to provide enhanced customization options and modern React compatibility. Key differentiators include robust TypeScript support, a flexible API for segment and value rendering, and an online sandbox editor for easy configuration. It requires React 16.8.2 or newer as a peer dependency, ensuring broad compatibility with contemporary React ecosystems.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-gauge-component"],"cli":null},"imports":["import GaugeComponent from 'react-gauge-component';","import { GaugeComponent } from 'react-gauge-component';","import dynamic from 'next/dynamic';\nconst GaugeComponent = dynamic(() => import('react-gauge-component'), { ssr: false });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport GaugeComponent from 'react-gauge-component';\n\nfunction MyGauge() {\n  return (\n    <div style={{ width: '300px', height: 'auto' }}>\n      <GaugeComponent\n        arc={{\n          width: 0.2,\n          padding: 0.005,\n          cornerRadius: 1,\n          subArcs: [\n            { limit: 15, color: '#EA4228', showPoint: true },\n            { limit: 35, color: '#F5CD19', showPoint: true },\n            { limit: 65, color: '#5BE12C', showPoint: true },\n            { limit: 100, color: '#444444', showPoint: true }\n          ]\n        }}\n        value={75}\n        labels={{\n          valueLabel: {\n            formatTextValue: value => value + ' km/h'\n          }\n        }}\n      />\n    </div>\n  );\n}\n\nexport default MyGauge;\n","lang":"typescript","description":"This quickstart demonstrates installing the package and rendering a basic gauge component with custom colored arcs, a value, and a formatted label.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}