I using Plotly js in Angular 8 to plot real time charts. Data is coming through web-socket(implemented via RxJS and subscribed to it). Data point come every 200 milliseconds. When Chart is in foreground it works fine, As soon as user switches tab plot goes blank, few data point are plotted. When user come back to chart Tab plotting resumes but gap can we seen there
Below attached image you can see the gap highlighted
Once if loop is fulfilled, graph does not update on it own. Need to click on Autoscale or resest axes button.
I have created pen to replicate same:
Steps to replicate:
- Open Link
([https://codepen.io/shubhamsv/pen/YzwXrKy](https://codepen.io/shubhamsv/pen/YzwXrKy)) - let it run for sometime
- Switch to some other tab and wait sometime.
- Come back to pen, you will see continuous data point is not there. It will resume plotting continuous data point, as soon as you come back.
My app goes blank (White screen as i have such 3 graphs running on same screen via same webscoket.) when tab becomes active again. Used sample code from here
Updated here : https://stackoverflow.com/questions/62256622/plotly-js-streaming-goes-blank-when-tab-run-in-background