Highcharts data from google spreadsheet show directed line

Question

If you see this line chart

Highcharts example

You can see London data has directed line (With arrows).

I want to add it here My Playground This piece of code converts series to line chart

function (chart) {
    chart.series[2].update({
        type: 'line',
        color: 'blue'
    });
}

I tried by checking options and API references. But could not find good solution. So, any help?

Answer 1

In the example you're looking at, the London line is not directed (although it does look like an arrow). The line has points with markers, just like the other lines, only the London marker is a triangle...it just looks like an arrow because of the way it is tilted on the last point.

There's more info on markers at the Highcharts API Reference

I haven't seen a directed line in a HighCharts chart :(

Answer 2

As @Eric Watson said directed line is not supported, but possible to achieve. Here you can find example how to add arrowhead to spline: http://jsfiddle.net/aUMCS/2/

    var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) / (lastPoint.plotY - nextLastPoint.plotY));
    path.push(
        'M',
        lastPoint.plotX, lastPoint.plotY,
        'L',
        lastPoint.plotX + arrowWidth * Math.cos(angle), lastPoint.plotY - arrowWidth * Math.sin(angle),
        lastPoint.plotX + arrowLength * Math.sin(angle), lastPoint.plotY + arrowLength * Math.cos(angle),
        lastPoint.plotX - arrowWidth * Math.cos(angle), lastPoint.plotY + arrowWidth * Math.sin(angle),
        'Z'
    );

I think you can or upgrade that solution to add arrowhead to each marker, or just split series into two elements each and then connect all series using linkedTo option.