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
});
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/
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With