| 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: Wed, 30 Jul 2025 17:41:38 GMT
etag: W/"687e6266-84de"
expires: Wed, 30 Jul 2025 17:51:37 GMT
last-modified: Mon, 21 Jul 2025 15:53:10 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: acbf38ddda8bd264928c0eb3e42f2a969c08fc70
x-github-request-id: 1B2C:A32C8:3CACF:449D1:688A5951
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210089-BOM
x-timer: S1753897298.807151,VS0,VE218
x-vercel-cache: MISS
x-vercel-id: bom1::sshnr-1753897297775-e801e56d9cc5
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);