1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

let data = {
  x: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'],
  y: [0.9e0, 2.1e0, 0.79e1, 1.13e1, 0.83e2, 2.9e2, 1.1e3, 4.5e3, 0.79e4, 4.1e4, 0.92e5, 3.1e5],
  type: 'bar'
}

let x = 1.5;
let y = 10;
let factor = 40 //increase x by 1 every 40 iterations
let updateX = 1/factor;
let updateY = Math.pow(10, 1/(2*factor)); //increase y by a power of 10 every 80 iterations

//update plot repeatedly
let interval = setInterval(function() {
  let layout = {
    xaxis: {
      range: [0, x],
    },
    yaxis: {
      range: [0, y>5e5?5e5:y]
    }
  }
  Plotly.react('plot', [data], layout, { responsive: true });
  
  x += updateX;
  y *= updateY;
  
  //stop updating after showing all values
  if (x >= (data.x.length - 0.5)) {
    clearInterval(interval);
  }
}, 30);