plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

3D Axes in plotly.js

How to format axes for 3d charts.

function getrandom(num , mul) 
	{
   var value = [ ]
   for(i=0;i<=num;i++)
   {
    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),
    },
    {
     opacity:0.5,
     type: 'scatter3d',
     x: getrandom(50 , -75),
     y: getrandom(50 , 75),
     z: getrandom(50 , 75),
    },
  	{
     opacity:0.5,
     type: 'scatter3d',
     x: getrandom(50 , 100),
     y: getrandom(50 , 100),
     z: getrandom(50 , 100),
    }
];
var layout = {
  scene:{
	 aspectmode: "manual",
   aspectratio: {
     x: 1, y: 0.7, z: 1,
    },
   xaxis: {
    nticks: 9,
    range: [-200, 100],
  },
   yaxis: {
    nticks: 7,
    range: [-100, 100],
  },
   zaxis: {
   nticks: 10,
   range: [-150, 100],
  }},
};
Plotly.newPlot('myDiv', data, layout);
  
function getrandom(num , mul) 
	{
	 var value = [ ]
	 for(i=0;i<=num;i++)
	 {
	  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: {
	 ticktext:['H20','C02','O2'],
	 tickvals:[-30, -45, -65, -10]
  },
  yaxis: {
  		nticks: 5,
  		tickfont:
  		{
  		 color:'green',
  		 family:'Old Standard TT, serif',
  		 size: 14
  		},
  		ticksuffix:'$'
  		},
  zaxis: {
       ticks: 'outside',
       tick0: 0,
       tickwidth: 4}},
};
Plotly.newPlot('myDiv', data, layout);
function getrandom(num , mul) 
	{
	 var value = [ ]
	 for(i=0;i<=num;i++)
	 {
	  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),
     mode:'markers'
    },
	{
	 opacity: 0.5,
	 type: 'scatter3d',
	 x: getrandom(75 , 75),
	 y: getrandom(75 , 75),
	 z: getrandom(75 , 75),
	 mode:'markers'
	},
	{
	 opacity: 0.5,
	 type: 'scatter3d',
	 x: getrandom(75 , 100),
	 y: getrandom(75 , 100),
	 z: getrandom(75 , 100),
	 mode:'markers'
	}
];
var layout = {
   scene:{
	xaxis: {
	 backgroundcolor: "rgb(200, 200, 230)",
	 gridcolor: "rgb(255, 255, 255)",
	 showbackground: true,
	 zerolinecolor: "rgb(255, 255, 255)",
	}, 
    yaxis: {
     backgroundcolor: "rgb(230, 200,230)",
     gridcolor: "rgb(255, 255, 255)",
     showbackground: true,
     zerolinecolor: "rgb(255, 255, 255)"
    }, 
    zaxis: {
     backgroundcolor: "rgb(230, 230,200)",
     gridcolor: "rgb(255, 255, 255)",
     showbackground: true,
     zerolinecolor: "rgb(255, 255, 255)"
    }}
};
Plotly.newPlot('myDiv', data, layout);
function getrandom(num , mul) {
	var value = [ ]
	for(i=0;i<=num;i++)
	{
	 rand = Math.random() * mul;
	 value.push(rand);
	}
	return value;}

var trace1 = {
	type:'mesh3d',
	x: getrandom(1000,200), y: getrandom(1000,300), z: getrandom(1000,150),
	color: 'lightblue',};

var trace2 = {
	type:'mesh3d',
	x: getrandom(1000,200), y: getrandom(1000,300), z: getrandom(1000,150),
	color: 'pink'};

var layout = {
	scene: {
		xaxis:{title: 'X AXIS TITLE'},
		yaxis:{title: 'Y AXIS TITLE'},
		zaxis:{title: 'Z AXIS TITLE'},
		},
	autosize: false,
	width: 550,
	height: 500,
	margin: {
	 l: 0,
	 r: 0,
	 b: 50,
	 t: 50,
	 pad: 4
	},
}	 
	 
Plotly.plot('myDiv', [trace1,trace2], layout);
function getrandom(num , mul) 
  {
     var value = [ ]  
     for(i=0;i<=num;i++)
     {
      rand = Math.random() * mul;
      value.push(rand);
     }
    return value;
  }
var data = [
  {
    x: getrandom(20, 4), 
    y: getrandom(20, 3), 
    z: getrandom(20, 5),
    opacity:0.5,
    mode: "markers",
    type: "scatter3d",
    scene: "scene1",
    name: "Lower the view point"
  },
   {
    x:getrandom(20, 4), 
    y:getrandom(20, 3), 
    z:getrandom(20, 5),
    opacity:0.5,
    mode: "markers",
    type: "scatter3d",
    scene: "scene2",
    name: "x-z plane"
  },
  {
    x:getrandom(20, 4), 
    y:getrandom(20, 3), 
    z:getrandom(20, 5), 
    opacity:0.5,
    mode: "markers",
    type: "scatter3d",
    scene: "scene3",
    name: "y-z plane"
  },
   {
    x:getrandom(10, 4), 
    y:getrandom(10, 3), 
    z:getrandom(10, 5), 
    opacity:0.5,
    mode: "markers",
    type: "scatter3d",
    scene: "scene4",
    name: "View from above"
  },
   {
    x:getrandom(20, 4), 
    y:getrandom(20, 3), 
    z:getrandom(20, 5), 
    opacity:0.5,
    mode: "markers",
    type: "scatter3d",
    scene: "scene5",
    name: "Zooming in"
  },
];
var layout = {
    scene1: {
      domain: {
            x: [0.00,  0.33], 
            y: [0.5, 1]
        },
      camera: {
          center: {
                x: 0, y: 0, z: 0 }, 
          eye: { 
                x: 2, y: 2, z: 0.1 }, 
           up: {
                x: 0, y: 0, z: 1 }
        },},
  
    scene2: {
      domain: {
             x: [0.33,  0.66], 
             y: [0.5, 1.0]
            },
      camera: {
          center: {
                x: 0, y: 0, z: 0}, 
          eye: { 
                x:0.1, y:2.5, z:0.1}, 
          up: {
                x: 0, y: 0, z: 1}
        },},
  
  scene3: {
      domain: {
             x: [0.66,  0.99], 
             y: [0.5, 1]
            },
      camera: {
          center: {
                x: 0, y: 0, z: 0}, 
          eye: { 
                 x:2.5, y:0.1, z:0.1}, 
          up: {
                 x: 0, y: 0, z: 1}
    },},    
  
  scene4: {
      domain: {
             x: [0.15,  0.5], 
             y: [-0.25, 0.4]
            },
      camera: {
        center: {
              x: 0, y: 0, z: 0}, 
        eye: { 
              x:0.1, y:0.1, z:2.5}, 
        up: {
              x: 0, y: 0, z: 1}
    },},
  
  scene5: {
        domain: {
               x: [0.62,  0.7], 
               y: [-0.2, 0.4]
            },
      camera: {
        center: {
              x: 0, y: 0, z: 0}, 
        eye: { 
              x:0.1, y:0.1, z:1}, 
        up: {
              x: 0, y: 0, z: 1}
    },},
};
Plotly.plot('myDiv', data, layout);

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.