# Creating surface plot in a react component

**URL:** <https://community.plotly.com/t/creating-surface-plot-in-a-react-component/70660>\
**Category:** plotly.js\
**Tags:** question\
**Created:** [December 8, 2022, 1:02pm UTC](https://community.plotly.com/t/creating-surface-plot-in-a-react-component/70660 "2022-12-08T13:02:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![arunkumar413](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@arunkumar413](https://community.plotly.com/u/arunkumar413)\
**Post date:** [December 8, 2022, 1:02pm UTC](https://community.plotly.com/t/creating-surface-plot-in-a-react-component/70660/1 "2022-12-08T13:02:25Z")

</div>

Hi Team,

I’m trying to create a surface plot in a react component ( [flamboyant-water-109qyr - CodeSandbox](https://codesandbox.io/s/flamboyant-water-109qyr?file=/src/App.js:102-392) ). Could you please share the data format that needs to be passed to the component.

Is the below format the correct way to pass the x,y and z axes data?

```auto
 <Plot
      data={[
        {
          x: [1, 2, 3],
          y: [2, 6, 3],
          z: [1, 5, 3],

          type: "surface",
          mode: "lines+markers",
          marker: { color: "red" }
        }
      ]}
      layout={{ width: 620, height: 600, title: "A Fancy Plot" }}
    />

```

Thanks,  
Arun