How to add arrow to end of line while using type scatter

Question

How do I add arrow to every end of line properly where y is not equal to zero, and series type is scatter with linewidth 2, here I can see arrow is added but its not properly added,

Please see this Partially working Fiddle

This is my JS,originally prototype is written by stackoverflow's top contributor Mark

 $(function () {
  var lineSeries = Highcharts.seriesTypes.scatter;


var lineDrawGraph = lineSeries.prototype.drawGraph;
lineSeries.prototype.drawGraph = function() {

    var arrowLength = 15,
        arrowWidth = 9,
        series = this,
        segments = series.linedata || series.segments,
        lastSeg = segments[segments.length - 1],
        lastPoint = lastSeg[lastSeg.length - 1],
        nextLastPoint = lastSeg[lastSeg.length - 2],
        angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) /
        (lastPoint.plotY - nextLastPoint.plotY)),
        path = [];

        angle = Math.PI+angle;

    lineDrawGraph.apply(series, arguments);

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

    if (lastPoint.plotX > nextLastPoint.plotX)
    {
        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
    {        
        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
        })
        .add(series.group);

};

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container',
    defaultSeriesType: 'scatter'
},

 plotOptions: {
        series: {
                  animation: {
                               duration: 2000
                             },
                  lineWidth: 2,
           marker: {
                enabled: false
                }
                },

            states: {
                hover: {
                    enabled: true,
                    lineWidth: 2
                },

        }

          },    

series: [{
        name: 'main',
        id: 'main',
        data: [
            [0, 0],
            [(-3.969 +0), -1.001]
        ]
    }, {
        name: 'main',
        linkedTo: 'main',
        data: [
            [1, 0],
            [(-4.578 +1), 0.596]
        ]
    }, {
        name: 'main',
        linkedTo: 'main',
        data: [
            [2, 0],
            [(1.593 + 2), 0.484]
        ]
    }, {
        name: 'main',
        linkedTo: 'main',
        data: [
            [3, 0],
            [(-1.622 + 3), 1.580]
        ]
    }]
  });


  });

Please Help..

Thanks Mark for sharing code..

Answer 1

It's not the scatter that's messing you up; it's the fact that your data is not properly sorted. Highcharts expects input data to be sorted by x value:

data: [
    [0, 0],
    [(-3.969 +0), -1.001]
].sort() // this is wrong order, I added sort...

Also, you'll need to apply the fix to my orginal code from here.

Putting this together, here's an updated fiddle.