Chartjs-Draw vertical and horizonal lines on the radar chart (like x-y axes)

by

0👍

For the benefit of other users, I drew the axes with the chartjs plugins:

            plugins: [{
                beforeDraw: function(chart, options) {
                    if (chart.config.data.drawXYAxes) {
                        var ctx = chart.chart.ctx;
                        var yaxis = chart.scales['scale'];
                        var paddingX = 100;
                        var paddingY = 40;

                        ctx.save();
                        ctx.beginPath();
                        ctx.strokeStyle = '#0000ff';
                        ctx.lineWidth = 0.75;

                        drawArrow(ctx, yaxis.xCenter, yaxis.yCenter, yaxis.xCenter - yaxis.drawingArea - paddingX, yaxis.yCenter);
                        drawArrow(ctx, yaxis.xCenter, yaxis.yCenter, yaxis.xCenter + yaxis.drawingArea + paddingX, yaxis.yCenter);
                        drawArrow(ctx, yaxis.xCenter, yaxis.yCenter, yaxis.xCenter, yaxis.yCenter - yaxis.drawingArea - paddingY);
                        drawArrow(ctx, yaxis.xCenter, yaxis.yCenter, yaxis.xCenter, yaxis.yCenter + yaxis.drawingArea + paddingY);

                        ctx.stroke();
                        ctx.restore();
                    }
                }
            }]

paddingX and paddingY allow me to show the arrows above the actual radar chart, otherwise the chart will be drawn from top position leaving no room for arrow to go little up.

drawArrow function (credit: https://stackoverflow.com/a/6333775/1624330) will draw the line:

drawArrow = function(context, fromx, fromy, tox, toy) {
    var headlen = 10;
    var dx = tox - fromx;
    var dy = toy - fromy;
    var angle = Math.atan2(dy, dx);
    context.moveTo(fromx, fromy);
    context.lineTo(tox, toy);
    context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    context.moveTo(tox, toy);
    context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
}

Leave a comment