Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to update new plotline values instead of removing and adding new ones in highcharts

I have a dynamic value for a quote. Horizontal line indicates the current position on a line chart. To move it i have to remove and add last one each time i receive new. I need to animate transition of this plotline, that's why it should not be removed and created again.

That's how it looks now:

                    chart.yAxis[0].removePlotLine('current-price');

                    chart.yAxis[0].addPlotLine({
                        value: parsedData.quote,
                        color: 'black',
                        width: 0.5,
                        id: 'current-price',

                            useHTML:true
                        },
                        zIndex:100
                    });
like image 500
Fedor Alexandrovich Avatar asked Jun 15 '16 02:06

Fedor Alexandrovich


2 Answers

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

fiddle: https://jsfiddle.net/aviram26/v8xte4hL/

like image 93
Aviram Avatar answered Jan 24 '23 09:01

Aviram


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!

like image 22
Andy B Avatar answered Jan 24 '23 07:01

Andy B