موضوع‌ها
۰
فورک‌ها
۰
ستاره‌ها
۴
تاریخ ایجاد
۲۱ اردیبهشت ۱۴۰۰
آخرین بروزرسانی
حدود ۱ سال قبل
لایسنس
MIT License

react-gauge-ultimate

Powerful gauge chart for React

NPM JavaScript Style Guide react-gauge-ultimate Banner

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