Show Sidebar Hide Sidebar
Plotly.js

3D Hover Options in plotly.js

How to customize hover options for 3d charts.

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);
  

plotly.js runs on all SVG-compatible browsers