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

Question

Using chartjs, I would like to draw one horizontal and one vertical line that extend from the center of the radar chart and display custom title on the lines like below, can someone guide me?

Answer 1

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));
}