javascriptplotly.jspan

Panning is not working with hovering on lines - plotly js

Panning is not working while hovering on a marker.

To reproduce the problem please check the below code -> select pan -> hover on a marker -> drag the plot -> plot returns to it's original position.

var data = [{
      mode: "lines+markers",
      x:["December", "January", "February"],
      y:[4,1,3]
    }]

Plotly.react('myDiv', data).then(gd => {
      gd.on('plotly_hover', d => {
      var width_vals = gd.data.map(x => 5)
      Plotly.restyle(gd, 'line.width', width_vals)
      
      }).on('plotly_unhover', d => {
      var width_vals = gd.data.map(x => 1)
      Plotly.restyle(gd, 'line.width', width_vals)
      })
})
<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

example

Any suggestions would be appreciated!

Solution

  • Try setting xaxis.uirevision to any truthy value and keep it the same between re-renders. See https://plotly.com/javascript/reference/layout/#layout-uirevision

    var data = [{
      mode: "lines+markers",
      x:["December", "January", "February"],
      y:[4,1,3]
    }]

Plotly.react('myDiv', data).then(gd => {
      gd.on('plotly_hover', d => {
      var width_vals = gd.data.map(x => 5)
      Plotly.restyle(gd, { 'line.width': width_vals, 'xaxis.uirevision': 'anyvalue' })
      
      }).on('plotly_unhover', d => {
      var width_vals = gd.data.map(x => 1)
      Plotly.restyle(gd, { 'line.width': width_vals, 'xaxis.uirevision': 'anyvalue' } )
      })
})
    <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>