react-gauge-ultimate

Powerful gauge chart for React

Install

npm i react-gauge-ultimate

or

yarn add react-gauge-ultimate

Usage

import React from 'react'

import { Gauge } from 'react-gauge-ultimate'
import 'react-gauge-ultimate/dist/index.css'

const App = () => {
  return (
    <Gauge
      id='gauge id'
      className='Gauge'
      label='label text'
      percent={1}
      darkMode={false}
    />
  )
}

export default App

API

Warning: Do not use the same id for multiple charts, as it will put multiple charts in the same container

Name	PropType	Description	Default value
id	PropTypes.string.isRequired	Used for the identification of the div surrounding the chart
className	PropTypes.string	Add className to the div container
style	PropTypes.object	Add style to the div container	{ width: '100%' }
darkMode	PropTypes.bool	Set dark mode style to Gauge	false
marginInPercent	PropTypes.number	Margin for the chart inside the containing SVG element	0.05
cornerRadius	PropTypes.number	Corner radius for the elements in the chart	6
nrOfLevels	PropTypes.number	The number of elements displayed in the arc	3
percent	PropTypes.number	The number where the pointer should point to (between 0 and 1)	0.4
label	PropTypes.string	The text that displays above the percent	''
arcPadding	PropTypes.number	The distance between the elements in the arc	0.05
arcWidth	PropTypes.number	The thickness of the arc	0.2
colors	PropTypes.array	An array of colors in HEX format displayed in the arc	["#00FF00", "#FF0000"]
textColor	PropTypes.string	The color of the text	"#FFFFFF"
needleColor	PropTypes.string	The color of the needle triangle	"#464A4F"
needleBaseColor	PropTypes.string	The color of the circle at the base of the needle	"#464A4F"
hideText	PropTypes.bool	Whether or not to hide the percentage display	false
arcsLength	PropTypes.array	An array specifying the length of each individual arc. If this prop is set, the nrOfLevels prop will have no effect	none
animate	PropTypes.bool	Whether or not to animate the needle when loaded	true
animDelay	PropTypes.number	Delay in ms before starting the needle animation	500
animateDuration	PropTypes.number	Duration in ms for the needle animation	3000
formatTextValue	PropTypes.func	Format you own text value (example: value => value+'%')	null

License

MIT © boof-tech