Draw lines with arrowheads on spreadsheet

Posted by: martin.mayr on 22 April 2018, 7:31 pm EST

    • Post Options:
    • Link

    Posted 22 April 2018, 7:31 pm EST

    Is there a way to draw lines with arrowheads on the spreadsheet?

  • Posted 23 April 2018, 10:40 pm EST

    Hi Martin,

    You can use the code below to draw line with arrow head on Spread.Sheets.

    
    $('#DrawLinebutton').click(function () {         
                    var canvas = document.getElementById("ssvp_vp");
                    var context = canvas.getContext("2d");
                    var startX = 50;
                    var startY = 50;
                    var size = 100;
                    context.lineWidth = 2;
                    draw_arrow(context, startX, startY, size);
                });
    
                function draw_arrow(context, startX, startY, size) {
                    var arrowX = startX + 0.75 * size;
                    var arrowTopY = startY - 0.707 * (0.25 * size);
                    var arrowBottomY = startY + 0.707 * (0.25 * size);
                    context.moveTo(startX, startY);
                    context.lineTo(startX + size, startX);
                    context.lineTo(arrowX, arrowTopY);
                    context.moveTo(startX + size, startX);
                    context.lineTo(arrowX, arrowBottomY);
                    context.stroke();
                }
    
    

    Thanks,

    Deepak Sharma

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels