SVG marker on Highcharts path

Question

I want to draw arrows on my Highcharts chart and came up with this so far. Looks nice but has problems:

• higher stroke-width gives a longer arrow.
• rotating the arrow will require complicated calculation like here.

If I could use a SVG marker on a Highcharts path like in this SVG tutorial drawing arrows would become much easier

My code:

  renderer.path(['M', 200, 0, 'L', 200, 200,'L', 225, 200,'L',200,250,'L', 175, 200,'L', 200, 200])
    .attr({
        'stroke-width': 5,
        stroke: 'red',fill:'red'
    })
    .add();
renderer.path(['M', 400, 0, 'L', 400, 200,'L', 425, 200,'L',400,250,'L', 375, 200,'L', 400, 200])
    .attr({
        'stroke-width': 50,
        stroke: 'red',fill:'red'
    })
    .add();

Answer 1

I managed to draw arrows without using SVG marker. The arrow points exactly to the right spot, regardless of the rotation. It can even take into account the radius of the start and end point.

See fiddle

  function drawArrow(startX, startY, startRadius, endX, endY, endRadius, width) {

    var angle = Math.PI + Math.atan((endX - startX) / (endY - startY)),
        arrowLength = 3 * width,
        arrowWidth = 1.5 * width,
        path = [],
        startArrowX,
        startArrowY,
        margin = 5;

    if (endY >= startY) {
        //correct for circle radius
        startX -= ((startRadius + margin) * Math.sin(angle));
        startY -= ((startRadius + margin) * Math.cos(angle));
        endX += ((endRadius + margin) * Math.sin(angle));
        endY += ((endRadius + margin) * Math.cos(angle));

        //correct for arrow head length
        endX += (arrowLength * Math.sin(angle));
        endY += (arrowLength * Math.cos(angle));

        //draw arrow head
        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), 'Z');
    } else {
        //correct for circle radius
        startX += ((startRadius + margin) * Math.sin(angle));
        startY += ((startRadius + margin) * Math.cos(angle));
        endX -= ((endRadius + margin) * Math.sin(angle));
        endY -= ((endRadius + margin) * Math.cos(angle));

        //correct for arrow head length
        endX -= (arrowLength * Math.sin(angle));
        endY -= (arrowLength * Math.cos(angle));

        //draw arrow head
        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), 'Z');

    }

    renderer.path(path)
        .attr({
        'stroke-width': 1,
        stroke: '#989898',
        fill: '#989898'
    }).add();
    renderer.path(['M', startX, startY, 'L', endX, endY])
        .attr({
        'stroke-width': width,
        stroke: '#989898'
    }).add();