React-plotly.js with React Portals oddity


#1

I am using react-plotly.js with React Portals to open a new window with a plot in it. I am using code similar to here and
render() { return ( <Plot data={[ { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'}, }, {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]}, ]} layout={{width: 320, height: 240, title: 'A Fancy Plot'}} /> ); }
in a component. The result is below. The plot is appears to be in a separate div from the layout elements. I’m a react and plot.ly newbie and am stumped on how to fix this. Thanks.


#2

This appears related to https://github.com/plotly/plotly.js/issues/702

Does “React Portals” use child windows?


#3

Thanks, I was looking in the wrong place (react-plotly) and didn’t see that github issue.

Yes, ReactDOM.createPortal can be used to open a child window (as in my case). The issue you linked to does describe the same problem I am having but does not offer a solution, despite being opened in 2016!

Perhaps I will try just plotly.js instead of react-plotly.js.

Thanks!