Issue with Hover Functionality on 3D Surface Plot in Plotly

plotly.js
,
1

I am experiencing an issue with the hover functionality on a 3D surface plot created using Plotly.
When I move my mouse over the edges of the graph, it seems like the hover interaction does not extend fully to cover all the data. As a result, some data points near the edges are not accessible or visible through the hover template.
Is this a known issue with Plotly 3D surface plots?
Are there any specific adjustments or workarounds to ensure hover functionality works correctly for edge data points?In the code, if sizex is 5 and sizey is 500, we can access the data just fine, but when we change sizex to 3 and sizey to 1000, I encounter an issue where it doesn’t display the data.

Plotly version am using: 2.35.2
Here is the code;
function generateMockData(sizex, sizey) {
const z_data = ;
const x_data = ;
const y_data = ;

for (let i = 0; i <= sizey; i++) {
const row = ;
for (let j = 0; j <= sizex; j++) {
row.push(0);
}
z_data.push(row);
}

for (let i = 0; i <= sizey; i++) {
const row = ;
for (let j = 0; j <= sizex; j++) {
row.push(j);
}
x_data.push(row);
}

for (let j = 0; j <= sizey; j++) {
y_data.push(j);
}

return { x_data, y_data, z_data };
}
sizex = 3;
sizey = 1000;
const { x_data, y_data, z_data } = generateMockData(sizex, sizey);

const trace = {
type: ‘surface’,
x: x_data,
y: y_data,
z: z_data,
hovertemplate: ‘X: %{x}
Y: %{y}
Z: %{z}’,
colorscale: ‘Viridis’
};

const layout = {
title: ‘Mock Data 3D Surface’,
autosize: false,
width: 800,
height: 800,
margin: {
l: 65,
r: 50,
b: 65,
t: 90
},
scene: {
xaxis: { title: ‘X Axis’ },
yaxis: { title: ‘Y Axis’ },
zaxis: { title: ‘Z Axis’ }
}
};

// Render grafen
Plotly.newPlot(‘myDiv’, [trace], layout);