| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Tue, 29 Jul 2025 21:00:56 GMT
etag: W/"687e6267-84de"
expires: Tue, 29 Jul 2025 21:10:56 GMT
last-modified: Mon, 21 Jul 2025 15:53:11 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: afeed3a683cba5a97fe84bac25104d2106f92af7
x-github-request-id: 41DF:244431:F09E4:1192FB:68893687
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210090-BOM
x-timer: S1753822856.288728,VS0,VE215
x-vercel-cache: MISS
x-vercel-id: bom1::zjhxg-1753822856267-7987921de474
content-length: 8559
3d hover options in JavaScript
3D Hover Options in JavaScript
How to customize hover options for 3d charts.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
By default, Plotly's 3D plots display lines called "spikelines" while hovering over a point. These lines project from the hover point to each of the three axes' normal planes and then extend from those projection data points to the planes' wall boundaries.
function getrandom(num , mul)
{
var value = [ ];
for(i=0;i<=num;i++)
{
var rand = Math.random() * mul;
value.push(rand);
}
return value;
}
var data=[
{
opacity:0.4,
type: 'scatter3d',
x: getrandom(50 , -75),
y: getrandom(50 , -75),
z: getrandom(50 , -75),
},
];
var layout = {
scene:{
xaxis: {
spikecolor: '#1fe5bd',
spikesides: false,
spikethickness: 6
},
yaxis: {
spikecolor: '#1fe5bd',
spikesides: false,
spikethickness: 6
},
zaxis: {
spikecolor: '#1fe5bd',
spikethickness: 6
}
},
};
Plotly.newPlot('myDiv', data, layout);
In addition to spikelines, Plotly 3D Surface plots also display surface contours on hover by default.
These are customized by styling the contours
attribute in the surface trace.
x = [10,20,30,40]
y = [0,1,2,3]
z = [
[2,2,2,3],
[1,1,1,1],
[1,1,0,0],
[0,0,0,0]
];
var data=[
{
opacity:0.9,
type: 'surface',
x:x, y:y, z:z,
contours: {
x: {
highlight: true,
highlightcolor: "#41a7b3"
},
y: { highlight: false },
z: { highlight: false}
}
},
];
var layout = {
scene:{
xaxis: { showspikes: false },
yaxis: { showspikes: false },
zaxis: { showspikes: false }
},
};
Plotly.newPlot('myDiv', data, layout);