0
248
ViewsPanning 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>
Any suggestions would be appreciated!
·
Santiago Trujillo
1 answers
Answer question0
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>
·
Santiago Trujillo
Report
Answer question