1.0.4 • Published 2 years ago
react-gauge-ultimate v1.0.4
react-gauge-ultimate
Powerful gauge chart for React
Install
npm i react-gauge-ultimateor
yarn add react-gauge-ultimateUsage
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 AppAPI
Warning:Do not use the sameidfor 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