@cantoo/svg-radar-chart

svg-radar-chart

Generate SVG radar charts.

This library is inspired by radar-chart-d3 but tries to do a few things differently:

• svg-radar-chart does not limit you in which frontend stack you use. It just returns virtual-dom nodes.
• Because radar-chart-d3 includes D3, it weighs 212k. svg-radar-chart weighs 9k.
• Because angular-radial-plot includes includes D3, it weighs roughly 160k. svg-radar-chart weighs 9k.

Note: This library is an opinionated tool; I maintain it with my personal use cases in mind. I do'nt intend to cover every feature a radar chart library might possibly need.

Installing

npm install svg-radar-chart

Usage

import {radar} from 'svg-radar-chart'

const chart = radar({
	// columns
	battery: 'Battery Capacity',
	design: 'Design',
	useful: 'Usefulness',
}, [
	// data
	{class: 'iphone', battery: .7, design:  1, useful: .9},
	{class: 'galaxy', battery:  1, design: .6, useful: .8},
	{class: 'nexus',  battery: .8, design: .7, useful: .6},
])

svg-radar-chart returns virtual-dom, so you can decide what to do with it.

To generate an SVG string from it, use virtual-dom-stringify:

import stringify from 'virtual-dom-stringify'

const svg = `
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<style>
		.axis {
			stroke-width: .2;
		}
		.scale {
			stroke-width: .2;
		}
		.shape {
			fill-opacity: .3;
		}
		.shape:hover {
			fill-opacity: .6;
		}
	</style>
	${stringify(chart)}
</svg>
`

You may now create an SVG file using Node.js:

process.stdout.write(svg)

node generate-chart.js >chart.svg

Or insert it into the DOM:

document.querySelector('#my-chart').innerHTML = svg

Check the website or the example on how to customize charts further.

Smoothing

You can pass the cardinal-closed smoothing function as follows, but it will add another 18k to your bundle, if you use common-shakeify, otherwise a bit more.

import {smoothing} from 'svg-radar-chart/smoothing.js'

radar(columns, data, {
	smoothing: smoothing(.3), // tension of .3
})

API

radar(columns, data, opt = {})

columns must be an object. The values are captions.

data must be an array of data points. The keys in one data points must exist in columns.

opt is optional and has the following default values:

const defaults = {
	size: 100, // size of the chart (including captions)
	axes: true, // show axes?
	scales: 3, // show scale circles?
	captions: true, // show captions?
	captionsPosition: 1.2, // where on the axes are the captions?
	smoothing: noSmoothing, // shape smoothing function
	axisProps: () => ({className: 'axis'}),
	scaleProps: () => ({className: 'scale', fill: 'none'}),
	shapeProps: () => ({className: 'shape'}),
	captionProps: () => ({
		className: 'caption',
		textAnchor: 'middle', fontSize: 3,
		fontFamily: 'sans-serif',
	}),
}

smoothing(points) must return valid SVG <path> commands.

See also

• svg-patterns – Create SVG patterns programmatically to visualize data.
• svg-world-map – Render a world map with a pin at a specific location.

Contributing

If you have a question, found a bug or want to propose a feature, have a look at the issues page.