strange jumps when zooming on real time chart

[hp8wvvvgnj6asjm7]

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.

https://user-images.githubusercontent.com/45887282/110695326-a32a1180-81e1-11eb-8481-6e54cc9a2719.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,

    }})

[LoneWolfe29]

I am having a very similar issue. Were you able to solve this?

[DunderChief]

I was able to fix a similar issue I was having by setting the tickformat to something static. I noticed it was lagging out whenever the time format would change. In layout xaxis: tickformat = "%b %d, %Y<br>%H:%M"