How to draw arrows on a line-chart with Highcharts?

Question

I\'m trying to add an arrow to the end of my Highcharts line-chart. I\'ve already looked through similar questions but the solutions don\'t seem to work:

The result

Answer 1

Great help for me!

One note, the code above only works if there is only one series on the graph. I made a few changes that lets it work with more than one series. The issue was that since each arrow had the same ID, it would wipe out the prior arrows for other series, thinking they were old arrows that needed to be redrawn. All I did was change the id to be a combo of 'arrow' and the series name, so it only wipes out the prior arrows for the specific series.

(function(H) {

    var arrowCheck = false,
        pathTag;

    H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {

      // Now apply the original function with the original arguments, 
      // which are sliced off this function's arguments
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));

      // used a bit of regex to clean up the series name enough to be used as an id
      var arrowName = "arrow"+this.name.replace(/\W/g,"_").toLowerCase();
      // console.log("----------->arrowName:"+arrowName)

      var arrowLength = 15,
        arrowWidth = 7,
        series = this,
        data = series.data,
        len = data.length,
        segments = data,
        lastSeg = segments[segments.length - 1],
        path = [],
        lastPoint = null,
        nextLastPoint = null;

      if (lastSeg.y == 0) {
        lastPoint = segments[segments.length - 2];
        nextLastPoint = segments[segments.length - 1];
      } else {
        lastPoint = segments[segments.length - 1];
        nextLastPoint = segments[segments.length - 2];
      }

      var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) /
        (lastPoint.plotY - nextLastPoint.plotY));

      if (angle < 0) angle = Math.PI + angle;

      path.push('M', lastPoint.plotX, lastPoint.plotY);

      if (lastPoint.plotX > nextLastPoint.plotX) {

        if (arrowCheck === true) {
          //replaced 'arrow' with arrowName
          pathTag = document.getElementById(arrowName);
          if (pathTag != null) {
            pathTag.remove(pathTag);
          }
        }

        path.push(
          'L',
          lastPoint.plotX + arrowWidth * Math.cos(angle),
          lastPoint.plotY - arrowWidth * Math.sin(angle)
        );
        path.push(
          lastPoint.plotX + arrowLength * Math.sin(angle),
          lastPoint.plotY + arrowLength * Math.cos(angle)
        );
        path.push(
          lastPoint.plotX - arrowWidth * Math.cos(angle),
          lastPoint.plotY + arrowWidth * Math.sin(angle),
          'Z'
        );
      } else {


        if (arrowCheck === true) {
          //replaced 'arrow' with arrowName
          pathTag = document.getElementById(arrowName);
          if (pathTag != null) {
            pathTag.remove(pathTag);
          }
        }

        path.push(
          'L',
          lastPoint.plotX - arrowWidth * Math.cos(angle),
          lastPoint.plotY + arrowWidth * Math.sin(angle)
        );
        path.push(
          lastPoint.plotX - arrowLength * Math.sin(angle),
          lastPoint.plotY - arrowLength * Math.cos(angle)
        );
        path.push(
          lastPoint.plotX + arrowWidth * Math.cos(angle),
          lastPoint.plotY - arrowWidth * Math.sin(angle),
          'Z'
        );
      }

      series.chart.renderer.path(path)
        .attr({
          fill: series.color,
          id: arrowName //changed from 'arrow' to arrowName to enable more than one series with an arrow
        })
        .add(series.group);

       arrowCheck = true;

    });
  }(Highcharts));