Black Lives Matter. Please consider donating to Black Girls Code today.

Show Last 100 data only in dynamic chart

I am testing with following code , This shows all 1000+ data at once , I want to show only latest 100 data , when i want i can use pan tool to go back and see what happen…Also please tell me how to integrate range slider to it and how to make default mouse as pan tool.Thank you in advance.

 function rand() {
  return Math.random();
}


Plotly.plot('graph', [{
  y: [1,2,3].map(rand),
   rangeselector: {},
            rangeslider: {}
}, {
  y: [1,2,3].map(rand)
}]);

var cnt = 0;

var interval = setInterval(function() {
  
  Plotly.extendTraces('graph', {
    y: [[rand()], [rand()]]
  }, [0, 1])

  if(cnt === 100) clearInterval(interval);
}, 3);