derhuerst / Svg Radar Chart
Programming Languages
Projects that are alternatives of or similar to 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
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
const radar = require('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:
const stringify = require('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.
const smoothing = require('svg-radar-chart/smoothing')
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.