@cantoo/svg-radar-chart
v1.0.11
Published
A reusable radar chart in SVG.
Downloads
23
Readme
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
weighs9k
. - Because angular-radial-plot includes includes D3, it weighs roughly
160k
.svg-radar-chart
weighs9k
.
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.