Skills Radar Chart

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

Installation

Use the package manager npm to install json-pretty-textarea.

npm i skills-radar-chart

Usage

# import 
import { RadarChart } from "skills-radar-chart";

# return
  <RadarChart
    rawData={SkillsArray}
    skillPercentage="skillPercentage"
    skillName="skillName"
    label="Skills"
    backgroundColor="rgba(255, 99, 132, 0.2)"
    borderColor={["blue", "red", "green", "yellow"]}
    borderWidth="5"
    pointBackgroundColor="rgb(54, 162, 235)"
    pointBorderColor={["blue", "red", "green", "yellow"]}
    pointHoverBackgroundColor="#fff"
    pointHoverBorderColor="rgb(54, 162, 235)"
    borderDash={[2, 5]}
    borderDashOffset="8"
    angleLines="rgba(255, 99, 132, 0.2)"
    grid="rgba(255, 99, 132, 0.2)"
    pointLabels="rgba(255, 99, 132, 0.2)"
    ticks="rgba(255, 99, 132, 0.2)"
    ShowLegend={false}
  />

| Property | type | Default | Description | | ----------------------- |:-------------:|:----------:|:-----------------------:| | rawData | json data |MockDocument| Source File json | | skillPercentage | data | white |key colum (number) | | skillName | label | green | key colum (Name) | | ShowLegend | legend show | 1rem | {true} / {false} | | borderWidth | CSS | number |only Number no px or rem | | label | legend Text | text |css color/array of colors| | borderDash | CSS |number[2,0] |only Number no px or rem | | borderDashOffset | CSS | number |only Number no px or rem | | backgroundColor | CSS | blue |css color/array of colors| | pointBackgroundColor | CSS | blue |css color/array of colors| | pointHoverBackgroundColor | CSS | blue |css color/array of colors| | pointHoverBorderColor | CSS | blue |css color/array of colors| | borderColor | CSS | magenta |css color/array of colors| | angleLines | CSS | red |css color/array of colors| | grid | CSS | blue |css color/array of colors| | pointLabels | CSS | red |css color/array of colors| | ticks | CSS | red |css color/array of colors|

CodeSandBox Sample

[Skills Radar Chart]https://codesandbox.io/s/skills-radar-chart-nzbjxi

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