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-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