Black Lives Matter. Please consider donating to Black Girls Code today.

# How to draw 3D Surface Chart in Plotly by giving X Y Z axis

I have a table of data as follows

``````X	    Y	    Z
12.22	6.38	9.93
8.97	10.37	8.66
8.8	    7.6	    10.26
10.96	10.18	8.99
8.14	9.77	11.3
17.79	12.99	11.05
11.04	12.93	11.15
11.97	9.79	10.73
10.29	10.2	10.17
9.74	4.58	9.32
10.32	10.47	10.24
9.15	13.59	9.66
8.1	    5.85	9.23
6.55	10.58	9.69
18.78	8.29	9.39
``````

Then I created a grid, X horizontally, Z vertically, filled Y values in the cells.

After I selected the data and choose the 3D Surface Chart, It generated a chart as below:

I tried the example below where the first number in Z is empty:

``````      var data = [
{
z: [[,6.55,8.1,8.14,	8.8,8.97,9.15,9.74,10.29,10.32,10.96,11.04,11.97,12.22,17.79,18.78],
[8.66,0,0,0,0,10.47,0,0,0,0,0,0,0,0,0,0],
[8.99,0,0,0,0,0,0,0,0,0,10.18,0,0,0,0,0],
[9.23,0,5.85,0,0,0,0,0,0,0,0,0,0,0,0,0],
[9.32,0,0,0,0,0,0,4.58,0,0,0,0,0,0,0,0],
[9.39,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8.29],
[9.66,0,0,0,0,0,13.59,0,0,0,0,0,0,0,0,0],
[9.69,10.58,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[9.93,0,0,0,0,0,0,0,0,0,0,0,0,6.38,0,0],
[10.17,0,0,0,0,0,0,0,10.2,0,0,0,0,0,0,0],
[10.24,0,0,0,0,0,0,0,0,	10.47,0,0,0,0,0,0],
[10.26,0,0,0,7.6,0,0,0,0,0,0,0,0,0,0,0],
[10.73,0,0,0,0,0,0,0,0,0,0,0,9.79,0,0,0],
[11.05,0,0,0,0,0,0,0,0,0,0,0,0,0,12.99,0],
[11.15,0,0,0,0,0,0,0,0,0,0,12.93,0,0,0,0],
[11.3,0,0,9.77,0,0,0,0,0,0,0,0,0,0,0,0]],
type: 'surface'
}];
var layout = {
title: 'Mt Bruno Elevation',

autosize: false,
width: 700,
height: 700,
margin: {
l: 130,
r: 100,
b: 130,
t: 180,
}
};
``````

`Plotly.newPlot('example', data, layout);`

It generated a Chart as below which looks wrong:

I don’t know if I generated Z data wrong. Can anyone tell me which part I am doing it wrong? or Suggest me a way to generate 3d surface similar to Excel chart

Does this look ok: https://codepen.io/etpinard/pen/VVPyOr?editors=1010 ?

where I removed items in the first row and column.

Thanks for the response. In your example when user tries to move cursor over a shape, it dont show the correct value. That is why i tried to put X and Y values seperately. It changed the chart a little bit but it shows correct result. https://codepen.io/erdiatalay/pen/bQgKjG

this page shows sample. for x and y you only specify bound elements but not the whole combination. So dimension size of x and y is N while for Z, it is matrix on NXN size

sorry forgot to add page.

I think this issue was fixed in previous plotly.js versions.