Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@cantoo/svg-radar-chart

Package Overview
Dependencies
Maintainers
6
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cantoo/svg-radar-chart

A reusable radar chart in SVG.

  • 1.0.11
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
6
Created
Source

svg-radar-chart

Generate SVG radar charts.

an example

npm version ISC-licensed minimum Node.js version support me via GitHub Sponsors chat with me on Twitter

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.

Keywords

FAQs

Package last updated on 22 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc