title: Panning is not working with hovering on lines - plotly js
body: <p>Panning is not working while hovering on a marker.</p>
  <p>To reproduce the problem please check the below code -&gt; select pan -&gt; hover on a marker -&gt; drag the plot -&gt; plot returns to it's original position.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [{
        mode: "lines+markers",
        x:["December", "January", "February"],
        y:[4,1,3]
      }]
  
  Plotly.react('myDiv', data).then(gd =&gt; {
        gd.on('plotly_hover', d =&gt; {
        var width_vals = gd.data.map(x =&gt; 5)
        Plotly.restyle(gd, 'line.width', width_vals)
        
        }).on('plotly_unhover', d =&gt; {
        var width_vals = gd.data.map(x =&gt; 1)
        Plotly.restyle(gd, 'line.width', width_vals)
        })
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;!-- Load plotly.js into the DOM --&gt;
      &lt;script src='https://cdn.plot.ly/plotly-2.12.1.min.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id='myDiv'&gt;&lt;!-- Plotly chart will be drawn inside this DIV --&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/7LdJe.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7LdJe.gif" alt="example" /></a></p>
  <p>Any suggestions would be appreciated!</p>