How to put a react-plotly.js chart in front of a 3D scene created by react-three/fiber?

plotly.js
1

I have the following 3D scene created using react-three/fiber: full code on gist, basically rendering the <Canvas> component in root.render(), in which <Episode /> defines the 3D scene.

root.render(
    <Canvas>
        <Episode />
    </Canvas>
);

image
image1245×958 47.6 KB

But I don’t know how to put a react-plotly-js chart/component on top of it, using the example code shown on react plotly.js in javascript.

I can replace the Canvas component in root.render() with the example plot component shown on react plotly.js webpage:

root.render(
    <Plot
        data={[
            {
                x: [1, 2, 3],
                y: [2, 6, 3],
                type: 'scatter',
                mode: 'lines+markers',
                marker: { color: 'red' },
            },
            { type: 'bar', x: [1, 2, 3], y: [2, 5, 3] },
        ]}

        layout={{
            width: 800,
            height: 600,
            title: 'A Fancy Plot',
            paper_bgcolor: 'rgba(0,0,0,0)',
            plot_bgcolor: 'rgba(0,0,0,0)',
        }}
    />
)

… and I can get the bar chart rendered in the root div:

image
image1259×831 22.3 KB

But I don’t know how to overlay this transparent chart on top of the 3D scene created by react-three/fiber, i.e. adding the plot component on top of the <Canvas> component within root.render().

Appreciate your kind help.

2

Can you just set the z-index of the div that holds the chart to a large number?

3

Do you mean: 1) creating two divs with the same css settings, 2) render the react-three/fiber 3D scene to the div with smaller z-depth value set in css, and then 3) add the transparent Plotly.js chart to the other div with larger z-depth value?

I noticed this line in my code: const root = ReactDOM.createRoot(document.querySelector("#root"));.

I tried to use the same code to “createRoot” for another div and render the Plotly.js chart on it with larger z-depth value, but it doesn’t work, and I got a blank canvas.

I’m a React newbie, so forgive me if I miss quite fundamental things in creating React components here.

4

Hi, most likely the trick would be to use a fragment as you can have only one parent node in a react component. (Under root.render) So your canvas and graph would be children of it.

As of there, you can use the IDs of the components to set the appropriate css settings as is already discussed

Reg,
J.

1 Like
5

I think it just comes down to CSS. Put 3d scene in a component; put plotly chart in a component. then use css to position chart on top of 3d scene.

function App() {
  return (
    <div style={{position: 'relative', width: '100vw', height: '100vh'}}>
      <My3DCanvas />
      <MyPlotlyChart />
    </div>
  );
}

export default App;

set a css position in each component and play around with it until it’s positioned where you want it.

1 Like
6

Thanks, I’ll follow your suggestions to learn related basic knowledge.