Accepted answer

you can update the options directly and then update the axis:

var newValue = (chart.xAxis[0].options.plotLines[0].value + 1) % 10;
chart.xAxis[0].options.plotLines[0].value = newValue;



Update: The solution below is best suited for Highcharts. During subsequent comments and clarification, I learned the original poster is using Highstock, which does not support the scatter plot type. I was not successful in adapting this solution to their code, which was an areaspline chart using data points updated in real time.

Rather than using a plot line, I'd suggest creating a new series that will serve as your line. That way, you can update the series as needed and it will pick up the native animations that Highcharts provides.

Here's a working example using a basic line chart:

Below is the code for the new series, which uses the scatter type. Note that I've disabled the markers, added a line width, and set showInLegend and enableMouseTracking to false so it won't be seen by your users as a "true" data series.

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        // scatter plot line to serve as moveable plot line
        type: 'scatter', 
        data: [[0,10],[11,10]], 
        lineWidth: 1, 
        marker: {
            enabled: false          // hide the markers (to show only the line)
        showInLegend: false,        // hide in legend
        enableMouseTracking: false  // prevent user from interacting with this line

Whenever you click the button in this fiddle, it will move the new series line up 10 points on the y-axis. To do so, I update both ends of the line:

// button handler
var chart = $('#container').highcharts(),
    y = 30;
$('#button').click(function () {
    y += 10;
    // update both ends of the scatter line

As you can see, the line animates when it is moved.

I hope this is helpful and useful for you!


we've all probably seen the following page(s), they dont really contain an answer.

@Aviram had a good solution, but my example contains a lot more data , which causes slow redraws.

Ive found that the update() call does a redraw/rerender in some cases (source link), which can be very expensive and slow for large plots. i used the following code to update just the plot line, and it seems to update the plot line very quick. The reason i update plotLines and plotLinesAndBands, as in some cases when you redraw the lines/axis things need to match.

[chart].xAxis[0].options.plotLines[0].value = newVal;   
[chart].xAxis[0].plotLinesAndBands[0].options.value = newVal;

The render function used above is called on redraw anyway (source link), so were not doing anything crazy here!

Related Query

More Query from same tag