<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>
var gd = document.getElementById('graph');

var x = fill(1000, (_, i) => i);
var y = fill(1000, (_, i) => Math.sin(-i / 100 * Math.PI));
var lowResFilter = (_, i) => !(i % 100);

Plotly.plot(gd, [{
  x: x.filter(lowResFilter),
  y: y.filter(lowResFilter)
}]);

gd.on('plotly_relayout', function() {
  var xRange = gd.layout.xaxis.range;
  
  if(xRange[1] - xRange[0] < 300) {
    Plotly.restyle(gd, {
      x: [x],
      y: [y]
    });
  }
  else {
    Plotly.restyle(gd, {
      x: [x.filter(lowResFilter)],
      y: [y.filter(lowResFilter)]
    });
  }
});

function fill(N, func) {
  var empty = Array.apply(null, Array(N));
  return empty.map(func);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.