I have a 100-frame animation in one div and a standard area highchart in another div, with 100 positions on the x-axis. On the chart I can display a vertical line that tracks mouseovers, using this code:

  tooltip: {
    shared: true,
    crosshairs: true
  }

I'd like to create the identical type of line but have its placement tied to the animation frame. That is, as the animation progresses, the line on the chart would move to the matching position (if the animation is on frame 33, the line would move to position 33 on the x-axis of the chart).

How can I make this happen?

I'd like to simply update the value of the plotLine rather than add/remove each time, but I don't see an Axis.updatePlotLine or equivalent. If there is a way to do that, please let me know!

I have a 100-frame animation in one div and a standard area highchart in another div, with 100 positions on the x-axis. On the chart I can display a vertical line that tracks mouseovers, using this code:

  tooltip: {
    shared: true,
    crosshairs: true
  }

I'd like to create the identical type of line but have its placement tied to the animation frame. That is, as the animation progresses, the line on the chart would move to the matching position (if the animation is on frame 33, the line would move to position 33 on the x-axis of the chart).

How can I make this happen?

I'd like to simply update the value of the plotLine rather than add/remove each time, but I don't see an Axis.updatePlotLine or equivalent. If there is a way to do that, please let me know!

• javascript
• highcharts

3 Answers 3

You could a second series as a vertical line and then manipulate that series with a setTimeout and setData call to match the frame speed of your animation (or even better trigger the moving of the line from the animation as it advances to the next frame).

See fiddle here.

$(function () {

    var someData = [];
    var maxY = -9999, minY = 9999;
    for (var i = 0; i < 60; i++)
    {
        var x = i;
        var y = Math.random() * 10;
        if (y < minY) minY = y;
        if (y > maxY) maxY = y;
        someData.push([x,y]);
    }

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            minPadding: 0.05,
            maxPadding: 0.05
        },
        yAxis: {min: minY, max: maxY},        
        series: [{
            data: someData
        },
        {
            data: [[0,minY],[0,maxY]]
        }]
    });

    moveLine = function(){
       if (chart.series[1].data[0].x == 59){
          x = 0;
        }else{
          x = chart.series[1].data[0].x + 1;
        }
        chart.series[1].setData([[x,minY],[x,maxY]]);
       setTimeout(moveLine,1000);
    }

    setTimeout(moveLine,1000);

});​

You can use plotLines like you have discovered, but can avoid the add/remove line approach and rely on Highchart's renderer to animate an existing line. See this fiddle.

Relevant code:

$(function () {
    window.chart_instance = new Highcharts.Chart({
        yAxis: {
            plotLines: [{
                color: '#777',
                value: 55,
                width: 1
            }]
        },
        chart: {
            type: 'bar',
            renderTo: $('#container')[0]
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
        }]
    });

    $("#btn").click(function(){
       var chart = chart_instance;
       var axis = chart.yAxis[0]; // Get a reference to the Axis object that your plotline is associated with
       var line = axis.plotLinesAndBands[0]; // Get a reference to the plotLine
       line.options.value = 190; // Set desired new value
       line.render(); // Render with updated values. Will animate if animation enabled for the chart.
    });
});

I was able to make this work using plotLines (http://www.highcharts./ref/#xAxis-plotLines):

function addPlotLine(ts) {
  chart.xAxis[0].addPlotLine({
    value: ts,
    color: 'rgb(255, 0, 0)',
    width: 1,
    id: 'tsline'
  });
}

function removePlotLine() {
  chart.xAxis[0].removePlotLine('tsline');
}

function doAnimation(ts) {
  // animation code here
  removePlotLine();
  addPlotLine(ts);
}