title: why graph is getting blank after dragging it
body: <p>When I'm dragging(expanding) multiple times then graphs coming blank. I referred <a href="https://plot.ly/javascript/filled-area-plots/" rel="nofollow noreferrer">this code.</a> </p>
  
  <p>I want to plotly graph should work like<a href="http://www.highcharts.com/demo/line-time-series" rel="nofollow noreferrer">High Cahrt line graph</a>. In high chart when we drag 4-5 times then its stop zoom-in graph and not getting blank graph.</p>
  
  <p>I want to stop it. I don't want blank. I didn't get how to stop it. Before dragging graph like this:
  <a href="https://i.stack.imgur.com/MXSyH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MXSyH.png" alt="enter image description here"></a></p>
  
  <p>After dragging multiple times graph coming like following:
  <a href="https://i.stack.imgur.com/TRCSE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TRCSE.png" alt="enter image description here"></a></p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;script&gt;
   var server1 = ['server1','server1','server1','server1','server1','server1','server1'];
   var trace1 = {
   x: ['2013-10-04 22:23:00', '2016-10-06 22:23:00',  '2013-11-04 22:23:00', '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
   y: [1, 3, 6,9, 4, 5],
    fill: 'tozeroy',
    fillcolor: 'red',
    text: server1,
    hoverinfo: "x+y+text",
    name:"Server 1",
    type: 'scatter',
    mode:"markers",
    marker:
    {
     size:5,
     color:"gray"
    },
    uid:"c2e171"
   };
   var layout = {
    margin: {
      l: 20,
      r: 40,
      b: 40,
      t: 10
    },
    legend: {
    "orientation": "h"
    },
   };
  var data = [trace1];
  Plotly.newPlot('myDiv', data,layout);
  
  var plotDiv = document.getElementById('myDiv');
  &lt;/script&gt;
  </code></pre>
  
  <p>please help me. I'm new with plotly.js.
  Thank you in advance.</p>