Skills-radar-chart NPM

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