[Solved]-How to update new plotline values instead of removing and adding new ones in highcharts-Highcharts

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: http://jsfiddle.net/brightmatrix/ws3e1wns/

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
    chart.series[1].data[0].update([0,y]);
    chart.series[1].data[1].update([11,y]);
});

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.

https://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines https://api.highcharts.com/highcharts/xAxis.plotLines

@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;
[chart].xAxis[0].plotLinesAndBands[0].render(); 

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