How do I integrate Plotly realtime updating graphs with React JS without rerender of component

Question

I would like to use both React JS and plotly in my web app. I want plotly to graph realtime data, but I want to avoid a complete rerender of the graph everytime a new point is added. Plotly graphs have an update function that makes it so the entire graph isn't destroyed/rerendered.

So I have a few questions. 1. Is it possible to use react components to represent a plotly graph and have it update realtime without a full rerender of the graph? 2. If the above is not possible, is there a work around?

Thanks

Check out the answer in this post: stackoverflow.com/questions/70068221/… — Simon1
– Simon1, Commented Oct 14, 2022 at 0:18

Dakota · Accepted Answer · 2017-11-17 15:10:47Z

2

You can use shouldComponentUpdate to prevent your component from re-rendering when the data you use to update the plot changes. I'm currently doing exactly this with a canvas based project so it should work with plotly as well.

Edit: My shouldComponentUpdate looks like this, basically I only need to re-render the canvas if the size it's given changes not when the data changes.

  shouldComponentUpdate(nextProps) {
    if (this.props.height !== nextProps.height ||
       this.props.width !== nextProps.width) {
      return true;
    }

    return false;
  }

answered Nov 17, 2017 at 15:10

Dakota

1,2748 silver badges16 bronze badges

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

1 Comment

Philip Nguyen Over a year ago

I'll report back shortly to see if this works. Thanks

João Cota · Accepted Answer · 2018-12-25 03:04:16Z

1

Answering your question:

1 - Yes you can, Plot.ly provide a NPM lib for that, react-plotly.js, you can see more details in the docs

To work with real time update, you need to prepare your React Component to handle that, managing the React Lifecycle properly and work with Plot.ly graph update, more explained in this post.

answered Dec 25, 2018 at 3:04

João Cota

1372 silver badges12 bronze badges

Collectives™ on Stack Overflow

How do I integrate Plotly realtime updating graphs with React JS without rerender of component

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related