Can't react a 3d chart with react-plotly

[astritspanca]

I am using "react-plotly.js": "^2.3.0", and plotly.js 1.45.3. I am trying to recreate this graph in reactjs version 16.8. But all the charts are 2d and i can't even see anything in the screen. (No errors there).

import React from 'react'; import Plot from 'react-plotly.js'; import graphData from '../../public/resources/3d-graph.json';

> class Graphs extends React.Component {
>     render(){
>       return(
>         <Plot
>             data={[
>             {
>                 type: 'surface',
>                 x: graphData.x,
>                 y: graphData.y,
>                 z: graphData.z
>             }
>             ]}
>             layout={
>                 {
>                     width: 800,
>                     height: 600,
>                     margin: {
>                         l: 50,
>                         r: 50,
>                         b: 80,
>                         t: 90,
>                         pad: 4
>                     },
>                     title: graphData.masterGraph.title,
>                     annotations: [{
>                         text: graphData.masterGraph.model,
>                           font: {
>                           size: 14,
>                           color: '#444444',
>                         },
>                         showarrow: false,
>                         align: 'center',
>                         x: 0.5,
>                         y: 1.1,
>                         xref: 'paper',
>                         yref: 'paper',
>                     }],
>                     scene: {
>                         xaxis: {
>                             title: graphData.masterGraph.xAxis,
>                             titlefont: {
>                               family: 'Courier New, monospace',
>                               size: 12,
>                               color: '#444444'
>                             }
>                         },
>                         yaxis: {
>                             title: graphData.masterGraph.yAxis,
>                             titlefont: {
>                               family: 'Courier New, monospace',
>                               size: 12,
>                               color: '#444444'
>                             }
>                         },
>                         zaxis: {
>                             title: graphData.masterGraph.zAxis,
>                             titlefont: {
>                               family: 'Courier New, monospace',
>                               size: 12,
>                               color: '#444444'
>                             }
>                         }
>                     }
>                 }
>             }
>         />
>       )
>     }
>   }
> 
> export default Graphs

[oeph]

@astritspanca I think you are using the wrong data <-> data type combination. I attached you two different CodeSandbox links with either your data (I assume a similar structure) or your graph type.

Graph type "surface": https://codesandbox.io/s/eloquent-diffie-91ezk Your data: https://codesandbox.io/s/festive-moon-octkz