Progressbar-chart NPM

ProgressBar chart

ProgressBar Chart a React library for Easy creating ProgressBar for showing your data such as skills.

Installation

Use the package manager npm to install ProgressBar.

npm i progressbar-chart

Usage

# import 
import { ProgressBar } from "progressbar-chart";

# return
     <ProgressBar
      Data={SkillsArray}
      DataName="skillName"
      DataPercentage="skillPercentage"
      height="0.8rem"
      borderRadius="0.8rem"
      background="linear-gradient(to left,rgba(54, 162, 235, 1),rgba(54, 162, 235, 0.2))"
      boxShadow=" 0 3px 3px -5px rgba(54, 162, 235, 0.8),0 2px 5px rgba(54, 162, 235, 0.5)"
      color="rgb(0, 0, 0)"
    />

alt text

Property	type	Default	Description
Data	json data	MockDocument	Source File json
DataPercentage	data	prop name	key colum (number)
DataName	label	prop name	key colum (Name)
height	legend show	1rem	height
width	legend show	1rem	width
borderRadius	CSS	0.5rem	only Number no px or rem
background	legend Text	linear-gradient(to left,rgba(54, 162, 235, 1),rgba(54, 162, 235, 0.2))	css color/array of colors
boxShadow	CSS	0 3px 3px -5px rgba(54, 162, 235, 0.8),0 2px 5px rgba(54, 162, 235, 0.5)	only Number no px or rem
color	CSS	black	only Number no px or rem

CodeSandBox Sample

progressbar-chart https://codesandbox.io/s/progressbar-chart-isf0s1

Contributing

For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

progress bar react progress-bar react-progress-bar

rollup-plugin-local-resolve rollup-plugin-terser

@infinitebrahmanuniverse/nolb-prog @everything-registry/sub-chunk-2478

1.0.0

3 years ago