arrow of line chart highcharts

Question

I need to draw arrow of my line chart but i don\'t know well, here there are my code that make arrow http://jsfiddle.net/VQyVs/ I have probleme with serie 2

Answer 1

Series 2 is not sorted properly. It's putting the arrow head on the last point in the array which happens to be the first point on the X axis.

   {
     data: [[0.10391336,-0.647706317],
        [0.208684058,-0.439022259],
    [0.031920245,-0.407102014],
    [-0.280249839,-0.687351853]].sort(), // I added the .sort...
 marker: {
        enabled: false
     }
   }

UPDATE

I think I understand what you are after now. To reverse the direction of the head, you'll have to test for the direction (is it moving to the left or right) and then modify how it's drawn:

    if (lastPoint.plotX > nextLastPoint.plotX)
    {
        // to the right
        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
    {        
        // to the left
        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'
        );
    }

See new fiddle.