Add custom contours on top of 3d surface plot

plotly.js
1

I am trying to add a contour layer on top of a 3d surface graph based on custom data (shown in image below)
image
its desired top view looks like below (just contour parts)
image

I went thr’ documentation about how to add custom data on contours but it works when it is plotted separately. I aim to plot surface3d and a 2d contour (parallel to x-y plane) on same plot.

Here is what I have tried but contours are still not picking that custom data-

var data = [{
z: z_data,
type: ‘surface’,
contours: {
type:‘constraint’,
customdata:[1,2,1,2,3,6,5,4,8],
z: {
show: true,
coloring: ‘heatmap’,
showlabels: true,
showlinnes:false,
project: { z: true }
}
}
}];
Plotly.newPlot(‘myDiv’, data, layout, { showSendToCloud: true });

I am really new on plot.ly community and apologize if it looks so obvious question. I will appreciate any help on this

2

Thanks for using Plotly.js
Here is a demo.