Question

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!

Answer 1

I was able to make this work using plotLines (http://www.highcharts.com/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);
}