Open
Description
Hi,
is there a way to fix this?
not sure if it's related to react-plotly or plotly.js
The chart jumps back and forth in a confusing way while scrolling forward.
The faster I scroll the more extreme it jumps back.
When using the toolbar, it behaves normal.
electron-screen-recorder_gif.mp4
useEffect(() => {
setInterval(()=>{
$_state(($:any) => {
console.log($)
const _x = $.data[0].x
const _y = $.data[0].y
const _ymin = _y[_y.length-1] - gaussianRand()/100
const _ypls = _y[_y.length-1] + gaussianRand()/100
return {...$, data: [
{
...$.data[0],
x: [..._x, _x[_x.length-1]+0.1],
y: [..._y, ~~(Math.random()*2) ? _ymin : _ypls],
}
]}
})
}, 100)
},[])
return (
<Plot
className={jss.root}
data={_state.data}
layout={_state.layout}
config={_state.config}
onInitialized={figure => $_state(figure)}
onUpdate={figure => $_state(figure)}
/>
);
const [_state, $_state] = useState({
data:[
{
type: 'scattergl',
mode: 'markers',
marker: {
color : 'rgba(255, 255, 255, 0)',
line: {
width: 1,
color: ['rgba(255, 255, 255, 0.5)', 'rgba(255, 255, 0, 1)']
}
},
x: [0],
y: [0],
}]
, layout: {
title: '-',
font: {
family:'IBM Plex Mono',
size:10,
},
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
pad: 4
},
plot_bgcolor: 'rgba(255,255,255,0)',
paper_bgcolor: 'rgba(255,255,255,0)',
yaxis: {
tickcolor: 'rgba(255,255,255,0.1)',
tickwidth: 1,
gridcolor: 'rgba(255,255,255,0.1)',
gridwidth: 1,
zerolinecolor: 'rgba(255,255,255,0.1)',
zerolinewidth: 1,
},
xaxis: {
tickcolor: 'rgba(255,255,255,0.1)',
tickwidth: 1,
zerolinecolor: 'rgba(255,255,255,0.1)',
zerolinewidth: 1,
gridcolor: 'rgba(255,255,255,0.1)',
gridwidth: 1,
},
}, frames: [], config: {
scrollZoom:true,
}})