arrow

by kzoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JavaScript

$(function () {
    var renderer = new Highcharts.Renderer(
    $('#container')[0],
    800,
    800);

    renderer.path(['M', 0, 250, 'L', 800, 250])
        .attr({
        'stroke-width': 2,
        stroke: 'black'
    })
        .add();
    renderer.path(['M', 400, 0, 'L', 400, 800])
        .attr({
        'stroke-width': 2,
        stroke: 'black'
    })
        .add();


    drawArrow(400, 50, 400, 250, 20);

    function drawArrow(startX, startY, endX, endY, width) {
 
        var angle = Math.PI + Math.atan((endX - startX) / (endY - startY));
        var arrowLength = 3 * width,
            arrowWidth =  1.5*width;

        var path = [];
    
 
        if (endY>startY){
            endX+=(arrowLength * Math.sin(angle));
      endY+=(arrowLength * Math.cos(angle));   
        }else{
                  endX-=(arrowLength * Math.sin(angle));
      endY-=(arrowLength * Math.cos(angle));
       }
 



        if (endY < startY) {
    
         path.push('M', endX, endY);
            path.push(
                'L',
            endX + arrowWidth * Math.cos(angle),
            endY - arrowWidth * Math.sin(angle));
            path.push(
            endX + arrowLength * Math.sin(angle),
            endY + arrowLength * Math.cos(angle));
            path.push(
            endX - arrowWidth * Math.cos(angle),
            endY + arrowWidth * Math.sin(angle));
        } else {
         path.push('M', endX, endY);
            path.push(
                'L',
            endX - arrowWidth * Math.cos(angle),
            endY + arrowWidth * Math.sin(angle));
            path.push(
            endX - arrowLength * Math.sin(angle),
            endY - arrowLength * Math.cos(angle));
            path.push(
            endX + arrowWidth * Math.cos(angle),
            endY - arrowWidth * Math.sin(angle));
        }
        path.push('L', endX, endY, 'Z');

        renderer.path(path)
            .attr({
            'stroke-width': 1,
            stroke: 'red',
           ...