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

Answer 1

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;
  }

Answer 2

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.