react-svg-radar-chart

Generate SVG radar charts with React.

Based on svg-radar-chart.

Installing

npm install react-svg-radar-chart

Demo and Examples

Running demo

could be found here: https://spyna.github.io/react-svg-radar-chart/

Source code

could be found here: https://github.com/Spyna/react-svg-radar-chart/tree/master/src/demo.

Run locally

git clone https://github.com/Spyna/react-svg-radar-chart.git
cd react-svg-radar-chart && npm install;
npm start;

Usage

Import the RadarChart component and the default css file.

import RadarChart from 'react-svg-radar-chart';
import 'react-svg-radar-chart/build/css/index.css'

Create the dataset you want to draw

const data = [
      {
        data: {
          battery: 0.7,
          design: .8,
          useful: 0.9,
          speed: 0.67,
          weight: 0.8
        },
        meta: { color: 'blue' }
      },
      {
        data: {
          battery: 0.6,
          design: .85,
          useful: 0.5,
          speed: 0.6,
          weight: 0.7
        },
        meta: { color: 'red' }
      }
    ];

const captions = {
      // columns
      battery: 'Battery Capacity',
      design: 'Design',
      useful: 'Usefulness',
      speed: 'Speed',
      weight: 'Weight'
    };

Use the component:

<RadarChart
    captions={captions}
    data={data}
    size={450}
  />

Where:

• captions are the names that will be drawn on the svg.
• data are the data that will be displayed.
• size is the size of the svg in pixels

Putting all togheter

import React from 'react';

import RadarChart from 'react-svg-radar-chart';
import 'react-svg-radar-chart/build/css/index.css'

class App extends React.Component {
  render() {
 	 const data = [
      {
        data: {
          battery: 0.7,
          design: .8,
          useful: 0.9,
          speed: 0.67,
          weight: 0.8
        },
        meta: { color: 'blue' }
      },
      {
        data: {
          battery: 0.6,
          design: .85,
          useful: 0.5,
          speed: 0.6,
          weight: 0.7
        },
        meta: { color: 'red' }
      }
    ];

	const captions = {
      // columns
      battery: 'Battery Capacity',
      design: 'Design',
      useful: 'Usefulness',
      speed: 'Speed',
      weight: 'Weight'
    };

    return (
      <div>
        <RadarChart
            captions={{
              // columns
              battery: 'Battery Capacity',
              design: 'Design',
              useful: 'Usefulness',
              speed: 'Speed',
              weight: 'Weight'
            }}
            data={[
              // data
              {
                data: {
                  battery: 0.7,
                  design: .8,
                  useful: 0.9,
                  speed: 0.67,
                  weight: 0.8
                },
                meta: { color: '#58FCEC' }
              },
            ]}
            size={400}
          />
        </div>
    );
  }
}

export default App;

Props

| Property | meaning | mandatory | | --- | --- | --- | | captions | object the label on the chart | yes | | data | array the data to display | yes | | options | object custom options for the chart, see below | no | | size | number custom size, the default is 300 | no |

Data format

the data property must be an array of object composed as following:

const dataset1 = {
 data : {property1 : value1 , property2: value2, ..., propertyN: valueN},
 meta : { color: 'green'}
}
const data = [dataset1, dataset2, ..., datasetN]

The dataset object must have:

• a property named data: an object with the data to display: battery: 0.7. The name of each property must be found in the captions object.
• a property named meta: an object with a color or class property to set the color or the class in the chart.

Options, styles and defaults.

You can:

• Customize the color of the chart.
• Use your own stylesheet to customize the style of the radar chart.
• Pass some options to the RadarChart component.

Customize the color of the chart

When generating the data object you can use a meta property to set the color and the class of the shape.

const dataset1 = {
data : {...},
meta : { color: 'green'}
};
const dataset2 = {
data : {...},
meta : { class: 'my-custom-class'}
};

Use your own stylesheet to customize the style of the radar chart.

In the demo the 'react-svg-radar-chart/build/css/index.css' is imported, but you can define you own if needed.

If you want to use a custom stylesheet you have to implement these classes:

• .shape: the shape on the radar chart. The deafult is: fill-opacity: .3;.

• .shape:hover : if you want some hover effects. The default is: fill-opacity: .65;z-index: 100;.

• .scale: the circles in the radar chart. The default is: fill: #FAFAFA; stroke: #999;stroke-width: .2.

• .axis: the axis of the chart. The default is: stroke: #555; stroke-width: .2.

• .caption: the text on the chart. The default is: fill: #444; font-weight: 400; text-shadow: 1px 1px 0 #fff.

Pass some options to the RadarChart component

The RadarChart component accepts a property named options. The default options are:

const noSmoothing = points => {
  let d = 'M' + points[0][0].toFixed(4) + ',' + points[0][1].toFixed(4);
  for (let i = 1; i < points.length; i++) {
    d += 'L' + points[i][0].toFixed(4) + ',' + points[i][1].toFixed(4);
  }
  return d + 'z';
};

const defaultOptions = {
  size: 200,
  axes: true, // show axes?
  scales: 3, // show scale circles?
  captions: true, // show captions?
  captionMargin: 10,
  dots: false, // show dots?
  zoomDistance: 1.2, // where on the axes are the captions?
  setViewBox: (options) => `-${options.captionMargin} 0 ${options.size + options.captionMargin * 2} ${options.size}`, // custom viewBox ?
  smoothing: noSmoothing, // shape smoothing function
  axisProps: () => ({ className: 'axis' }),
  scaleProps: () => ({ className: 'scale', fill: 'none' }),
  shapeProps: () => ({ className: 'shape' }),
  captionProps: () => ({
    className: 'caption',
    textAnchor: 'middle',
    fontSize: 10,
    fontFamily: 'sans-serif'
  }),
  dotProps: () => ({
    className: 'dot',
    mouseEnter: (dot) => { console.log(dot) },
    mouseLeave: (dot) => { console.log(dot) }
  }),
  rotation: 0
};

| Property | meaning | | --- | --- | | size | the size in pixels of the svg chart, default is 300, can use only if size props is not used | | axes | true/false show axes | | scales | number how many scale circles | | captions | true/false show captions | | captionMargin | number The margin of the svg, to fit captions | | dots | true/false show dots | | zoomDistance | the distance of the zoom: 0.2 = closest | | smoothing | the smoothing function | | setViewBox | a function that take options' object as argument and returns viewBox as a string. ViewBox will be added to the svg| | axisProps | a function that take the current caption name as arguments and returns an object. All the property will be added to the axis svg component| | scaleProps | a function that take the value of the scales as arguments and returns an object. All the property will be added to the scale svg component| | shapeProps | a function that take the meta of the data as arguments and returns an object. All the property will be added to the shape svg component| | captionProps | a function that take the current caption name as arguments and returns an object. All the property will be added to the text svg component| | dotProps | a function that takes the dot svg component as arguments and returns an object. All properties will be added to the dot svg component. The mouseEnter function returns useful information like key, value and the index of the shape the dot is associated with. See the demo as example for using the information as a tooltip| | rotation | default 0: The rotation (clockwise) in degrees. A number that indicates the rotation of the shape and captions. It must be beetween 0 and 360. Eg: 180 makes the chart upside down. 90 rotates the chart of 90 degrees. | | wrapCaptionAt | default 15: The max length of the caption before it is wrapped in a new line | | captionLineHeight | default 20: The height of the line of a caption when it is wrapped in a new line |