Updating a subplot using react-plotly and JSX

plotly.js
1

Hi there!

I’m fairly new to react and react-plotly, so I’m not quite sure if I can replicate my issue with a pen yet. I’ll try it tonight.

I’m trying to use react-plotly to power a react dashboard. The dashboard has some subplots, let’s assume 5.

I’ve followed the JSX example and I am able to display some graphs.

When attempting to update specific subplots, I perform the following snippet:



let newData = Array.from(this.state.data); // create a copy of the current state

newData[0] = e.data; // update the first subplot

this.setState({data:newData}) // update the state

Here, I’m trying to update the first subplot only, however, I encounter this error:

Failed prop type: Invalid prop 'data[0]' of type 'array' supplied to 'PlotlyComponent', expected 'object'.

I understand the error. Replacing the last line with

this.setState({data:newData[0]})

solves this issue, however, now I don’t have my subplots!

How can I update just one subplot with react-plotly and JSX? Is this even possible? Should I just use good ol’ JavaScript and just call Plotly.react ?

Thanks!

Figured it out. Sorry about that! The solution was to modify the axis domains in the layout property.

2

Update:

I discovered that using setState and passing data for a new subplot that doesn’t exist appears to automatically push that data set. This explains the error.