1.0.0 • Published 2 years ago
progressbar-chart v1.0.0
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)"
/>
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-charthttps://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
1.0.0
2 years ago