Hi there,

Thanks so much for your nice work.

Sorry if my question seems dumb to u, but I was wondering how far would we be from making this code in IE?
I tried IE11, added the <meta http-equiv="X-UA-Compatible" content="IE=edge">, but got no success...

Any plans in this direction?

Thanks in advance for your kind answer

when i set axes true, there is no reaction

Accepting any h function would allow users to use the frontend framework of their choice.

Hi, playing with your module and find it great. Now what I would like to do is to:

1. Have chart shape composed of different paths (number of them is number of columns) e.g. triangles with coordinates a center, then column value on an axis and the next column value.
2. Have alternating style (well, at least a color) for odd and even columns.

The idea is to have a way to do this radar chart (only alternating colors are the matter here):

I will ask about the captions in another issue.

UPDATE: the chart (image) above was most likely been created with https://github.com/colorfulgrayscale/angular-radial-plot (Angular based component).

Hey mate, thanks for your work

Would it be possible to add JSDoc to the exposed methods of your project so that we can benefit from types? Or export a ts file for typescript users?

This is a desirable feature and relatively simple to achieve but I'm not that versed in node.js yet. The captions would look best if they would be in the angle and rotated so the letters are always upside down. Repeating the same image as in other issue for a demonstration (apologizing for that):

Now this is quite good yet even better would to have the captions on the path. For that invisible circle segments (arcs) would need to be added to a chart and used as xlink:href attributes for captions (so they align with the arc). Best example for a coding help is here:

http://bl.ocks.org/nbremer/b603c3e0f7a74794da87

If this would be added to svg-radar-chart, together with alternate colors and possibly a parameter to have linear or logarithmic scales of column values (and scales to adapt as well) it would make svg-radar-chart fully complete and still small in size and versatile.

It will be perfect if this project can support the title and the legend , as in the picture below

The devDependency browserify was updated from 16.3.0 to 16.4.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

browserify is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi Jannis! I guess this is potentially a feature request or a question if you don't have the time.

SVG scares (horrifies me), but your package works wonders and I'm super happy with it. I'm trying to add a title / text to my charts though and I'm not sure where it might go in the package code... do you think you could point me in the right direction / towards the right resources? Thanks!

I used this code to generate similar chart as show bellow but the result was have so visual differences:

const radar = require('svg-radar-chart');
const stringify = require('virtual-dom-stringify');

var fs = require('fs');



    const result = [1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 2, 0, 0];
    var final = sort(result);
    console.log(final);

    const chart = radar({
        // columns
        a: 'a',
        b: 'b',
        c: 'c',
        d: 'd',
        e: 'e',
        f: 'f',
        g: 'g',
        h: 'h'
    }, [
        // data
        {
            class: 'sab1',
            a: final[0] / 10,
            b: final[1] / 10,
            c: final[2] / 10,
            d: final[3] / 10,
            e: final[4] / 10,
            f: final[5] / 10,
            g: final[6] / 10,
            h: final[7] / 10
        }

    ]);
    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: .3;
		}
		.shape {
			fill-opacity: .3;
		}
		.shape:hover {
			fill-opacity: .6;
		}
	</style>
	${stringify(chart)}
</svg>
`;
    
    //process.stdout.write(svg);
    var fname = 'test' + '.svg';
    fs.writeFile(fname, svg, function (err) {
        if (err) {
            return console.log(err);
        }
        console.log("The file was saved!");
    });

    function sort(result) {

        var newr = [
            [0],
            [0],
            [0],
            [0],
            [0],
            [0],
            [0],
            [0]
        ];

        var j = 0;
        var p = 0;
        for (var i = 0; i != 7; i++) {
            var ip = 0;
            for (var k = j; k != 7; k++) {
                newr[ip].push(result[p]);
                p++;
                ip++;
            }
            j++;
        }
        for (var i = 0; i != 7; i++) {
            ip = i + 1;
            for (var k = i + 1; k != 8; k++) {
                newr[ip].unshift(result[p]);
                p++;
                ip++;
            }

        }
        return subtotall(newr);
    }

    function subtotall(newr) {
        var total = [0, 0, 0, 0, 0, 0, 0, 0];
        for (var i = 0; i < 8; i++) {
            for (var j = 0; j < 8; j++) {
                if (newr[i][j] == 1) {
                    total[i] = total[i] + 1;
                }
            }
        }
        for (var i = 0; i < 8; i++) {
            for (var j = 0; j < 8; j++) {
                if (newr[j][i] == 2) {
                    total[i] = total[i] + 1;
                }
            }
        }
        return total;
    }

Preferred Chart:

Output result:

Thank you for the great lightweight script which I'm using successfully on 2 charts. The first has 5 columns & works beautifully. For the 2nd I had to comment out the code below:
columns.reduce((all, column) => { all[column.key] = column return all }, columns)

For some reason it is transforming data with this set of 18 columns:
{1: "Collaboration & Teamwork", 2: "Trustworthiness", 3: "Empathy & Respect", 4: "Relationship-centred Care", 5: "Effective Communication", 6: "Application of Expertise", 7: "Problem-solving", 8: "Managing Workflow", 9: "Continual Learning", 10: "Commitment", 11: "Diligence", 12: "Sustainable Engagement", 13: "Motivation", 14: "Resilience", 15: "Adaptability", 16: "Emotional Competence", 17: "Reflective Self-evaluation", 18: "Self-confidence & Identity"}

into a VirtualNode with every 2nd column replaced with a copy of its predecessor, which then results in an SVG chart with every 2nd column missing. See screenshots below. Weird reduce behaviour, or something I'm doing wrong?

I want to remove opacity & add box shadow of all radars. I am trying to achieve something like this

Can you please guide me?