CODEWITHSUNDEEP
javascriptreactjstypescriptplotly
infinitezero
infinitezero

Reputation: 2077

How can I update the plot with React plotly?

I have the following Snippet to draw a plot with plotly in React:

render() {
        return (
            <div id="plot_div">
                <Plot
                    data={[
                        {
                            x: this.x,
                            y: this.y,
                            type: 'scatter',
                            mode: 'markers',
                            marker: {color: this.colors},
                            text: this.labels
                        }
                    ]}
                    layout={{width: 500, height: 500,
                    }}
                    config={{scrollZoom: false, editable: false, displayModeBar: false}}
                />
            </div>
        )
    }

When this.colors changes, I want the plot to be redrawn. But this does not happen automatically. How can I force the component to update the plot?

Upvotes: 0

Views: 4042

Answers (2)

Pavel Pokrovskii
Pavel Pokrovskii

Reputation: 41

you can use useEffect() hook from react:

useEffect(() => {
    Plotly.react('plot_div', [data], layout);
}, [data])

Upvotes: 1

infinitezero
infinitezero

Reputation: 2077

One has to add the datarevision property to layout, which one can update via a state variable, i.e.

layout={{width: 500, height: 500, datarevision: this.state.revise}}

Upvotes: 3

Related Questions