Add new data to visible range after using range slider for live time series data

plotly.js
1

I’m using a Plotly.js Line chart to display live data on a website. A microcontroller sends the data via Socket.IO.

I want to add a range selector and range slider to the graph so that users can filter the data, but it’s not working as expected. For example, when I click on one of the range selector buttons, it selects the last 30 seconds, but new data is added outside the displayed range. I want the new data to be added in the visible range.

Any help is greatly appreciated.

Code example: https://codepen.io/GilbertTa/pen/ExoYwLr

plotly_live_data