React-radar-chart NPM

React Radar Chart

react-radar-chart is intended to be a simple solution for those seeking a standalone radar chart for use in their project.

Installation

The easiest way to use react-radar-chart is to install it from npm and build it into your app with Webpack.

npm install react-radar-chart

Then just import react-radar-chart into your project and you're all set!

import RadarChart from 'react-radar-chart';

You may also want to use the standalone UMD build. If so, just include react-radar-chart.min.js and react-radar-chart.min.css in your page, along with it's dependencies.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>

Props

Property	Type	Default	Description
`axisNames`	array	[]	Array of string values that will be used as the labels for each of the radar chart axes.
`classNames`	object	{}	Object containing class names for the various components and sub components of the radar chart. See 'styling' section below for details.
`groups`	object	{}	Object containing color and rating attributes for each group, by group name {groupName: {color: 'blue', attributes: {skill: 5}}}
`rungs`	number	10	Number indicating the number of rungs the chart should have.
`scaleAlign`	string	'bottom-left'	A string indicating where to align the scale. See 'scale alignment' section below for details.
`scaleRenderer`	function	see description	A function that can be used to render a custom chart scale. Renders a simple scale by default.

Styling

Custom classNames can be passed via the classNames prop.

Class Name	Use
`axis`	change the color / thickness of the Axes
`container`	style the containing div
`key`	change the text size or the position of the key
`label`	change the size, color, font of the axis labels
`outline`	change the opacity of the outline, size of the rating points, or width of the border
`rung`	change the width / color for the chart rungs
`scale`	change color / font size of the scale
`svgParent`	style the svgParent element
`wrapper`	style the wrapper div

Scale Alignment

There are 8 areas that the scale can be aligned:

top (right / left)
bottom (right / left)
left (top / bottom)
right (top / bottom)

To align in one of these areas, use the following format and pass via the scaleAlign prop.

'edge-alignment' eg. 'top-right' or 'left-bottom'

Groups

This will be the most important prop you pass to the RadarChart component. Use the following as a reference.

{
	Player1: {
		color: 'blue',
		ratings: {
			speed: 3,
			attack: 5,
			defense: 8
		}
	},
	Player2: {
		color: 'green',
		ratings: {
			speed: 10,
			attack: 3,
			defense: 3
		}
	},
	Player3: {
		color: 'red',
		ratings: {
			speed: 5,
			attack: 5,
			defense: 5
		}
	}
}

make sure that each groups' ratings are represented in the axisNames array prop.