score:2

Accepted answer

you can extend the radar chart type to do this, like so

chart.types.radar.extend({
    name: "radaralt",
    initialize: function (data) {
        chart.types.radar.prototype.initialize.apply(this, arguments);

        var originalscaledraw = this.scale.draw;
        var ctx = this.chart.ctx;
        this.scale.draw = function () {
            var linewidth = this.linewidth;
            // this bypasses the line drawing in originalscaledraw
            this.linewidth = linewidth;

            originalscaledraw.apply(this, arguments);

            ctx.linewidth = this.linewidth;
            var scale = this;
            // now we draw
            chart.helpers.each(scale.ylabels, function (label, index) {
                // color of each radial line - you could replace this by an array lookup (if you limit your scalesteps)
                ctx.strokestyle = "hsl(" + index / scale.ylabels.length * 360 + ", 80%, 70%)";

                // copy of the chart.js code
                ctx.beginpath();
                for (var i = 0; i < scale.valuescount; i++) {
                    pointposition = scale.getpointposition(i, scale.calculatecenteroffset(scale.min + (index * scale.stepvalue)));
                    if (i === 0) {
                        ctx.moveto(pointposition.x, pointposition.y);
                    } else {
                        ctx.lineto(pointposition.x, pointposition.y);
                    }
                }
                ctx.closepath();
                ctx.stroke();
            });
        }
    }
});

and then call it like so

var ctx = document.getelementbyid("mychart").getcontext("2d");
var myradarchart = new chart(ctx).radaralt(data, {
    scalelinewidth: 10
});

// this is requried if you have animation: false
// myradarchart.update();

fiddle - http://jsfiddle.net/x3ftqx5r/


of course, the sane thing would be to change the lightness value instead of the hue value :-)

enter image description here


Related Query

More Query from same tag