Plotly React keep zoom and rotation between re-rendering

Question

I'm using the React version of plot.ly to render a 3D scatter plot, but every time I re-render my component, the plot gets reset to its default configuration.

How can I prevent this, and keep the zoom/rotation configuration?

Below is a minimal code example. To re-iterate, how can I save the zoom and rotation, and how can I set it on the plot?

setPlotData() {
    const points = {
        1: {x: 1, y: 1, z: 1},
        2: {x: 2, y: 1, z: 1},
        3: {x: 3, y: 2, z: 1}
    }
    const x=[], y=[], z=[]
    Object.keys(points).forEach((key, index) => {
        x.push(points[key].x); y.push(points[key].y); z.push(points[key].z)
    })
    const data1 = {
            x: x, y: y, z: z,
            mode: "markers",
            marker: {
            color: "rgb(16, 52, 166)",
            size: 4,
            symbol: "circle",
            opacity: 1
            },
            type: "scatter3d"
    }
    this.setState({
        scatterPlotData: [data1]
    })
}

render() {
    return(
        <Plot 
            data={this.state.scatterPlotData}
            layout={{
                autosize: true,
                l: 0, r: 0, b: 0, t: 0, pad: 0,
                showlegend: false,
                margin:{l:0,r:0,b:0,t:0}
            }}
            style={{ width: '100%', height: '100%' }}
        />
    )
}

siddhartha kasaraneni · Accepted Answer · 2021-05-22 10:14:05Z

6

Update the layout to add uirevision parameter

layout={{
     autosize: true,
     l: 0, r: 0, b: 0, t: 0, pad: 0,
     showlegend: false,
     margin:{l:0,r:0,b:0,t:0},
     xaxis: {
        uirevision: 'time',
     },
     yaxis: {
        uirevision: 'time',
     },

}}

you can change the uirevision: "time" to whatever x,y axis parameters you use

edited May 22, 2021 at 10:14

answered Apr 21, 2021 at 15:09

siddhartha kasaraneni

7067 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

danchez Over a year ago

This does not work for me as I do not see the uirevision field defined as part of the LayoutAxis prop fields used to define the layout object in react-plotly.js. Is there some other field that we are supposed to use to maintain visual zoom state when a chart update occurs?

danchez Over a year ago

Ah, my mistake, the uirevision field does exist but it is not part of xaxis/yaxis as shown in the answer here. It is part of the top-level fields of the Layout object. So that is where we can place it and things will work as expected.

Collectives™ on Stack Overflow

Plotly React keep zoom and rotation between re-rendering

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related