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

alt text

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

Package detail

skills-radar-chart

readme