plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Axes in plotly.js

How to adjust axes properties in D3.js-based javascript charts. Seven examples of linear and logarithmic axes, axes titles, and styling and coloring axes and grid lines.

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    autotick: false,
    ticks: 'outside',
    tick0: 0,
    dtick: 0.25,
    ticklen: 8,
    tickwidth: 4,
    tickcolor: '#000'
  },
  yaxis: {
    autotick: false,
    ticks: 'outside',
    tick0: 0,
    dtick: 0.25,
    ticklen: 8,
    tickwidth: 4,
    tickcolor: '#000'
  }
};
Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    title: 'AXIS TITLE',
    titlefont: {
      family: 'Arial, sans-serif',
      size: 18,
      color: 'lightgrey'
    },
    showticklabels: true,
    tickangle: 45,
    tickfont: {
      family: 'Old Standard TT, serif',
      size: 14,
      color: 'black'
    },
    exponentformat: 'e',
    showexponent: 'All'
  },
  yaxis: {
    title: 'AXIS TITLE',
    titlefont: {
      family: 'Arial, sans-serif',
      size: 18,
      color: 'lightgrey'
    },
    showticklabels: true,
    tickangle: 45,
    tickfont: {
      family: 'Old Standard TT, serif',
      size: 14,
      color: 'black'
    },
    exponentformat: 'e',
    showexponent: 'All'
  }
};
Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    showgrid: true,
    zeroline: true,
    showline: true,
    mirror: 'ticks',
    gridcolor: '#bdbdbd',
    gridwidth: 2,
    zerolinecolor: '#969696',
    zerolinewidth: 4,
    linecolor: '#636363',
    linewidth: 6
  },
  yaxis: {
    showgrid: true,
    zeroline: true,
    showline: true,
    mirror: 'ticks',
    gridcolor: '#bdbdbd',
    gridwidth: 2,
    zerolinecolor: '#969696',
    zerolinewidth: 4,
    linecolor: '#636363',
    linewidth: 6
  }
};
Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  xaxis: {range: [2, 5]},
  yaxis: {range: [2, 5]}
};
Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    autorange: true,
    showgrid: false,
    zeroline: false,
    showline: false,
    autotick: true,
    ticks: '',
    showticklabels: false
  },
  yaxis: {
    autorange: true,
    showgrid: false,
    zeroline: false,
    showline: false,
    autotick: true,
    ticks: '',
    showticklabels: false
  }
};
Plotly.newPlot('myDiv', data, layout);
var data = [
  {
    x: [2, 4, 6],
    y: [-3, 0, 3],
    type: 'scatter'
  }
];
var layout = {
  showlegend: false,
  xaxis: {
    rangemode: 'tozero',
    autorange: true
  },
  yaxis: {
    rangemode: 'nonnegative',
    autorange: true
  }
};
Plotly.newPlot('myDiv', data, layout);
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/stockdata.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row)
  { return row[key]; });}

var trace1 = {
  x:unpack(rows, 'Date'),
  y: unpack(rows, 'IBM'),
  mode: 'markers',
  marker: {
    size: 7,
    line: {
    width: 0.5},
    opacity: 0.8},
  type: 'scatter'
};

var layout = {
  title: 'IBM Stock Data: Jan 2007 - Mar 2016',
  xaxis: {tickvals:['2007-01-01', '2007-09-01', '2008-01-01', '2008-09-01', '2009-01-01', '2010-01-01', '2011-01-01', '2011-02-14',  '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01'],
        ticktext : ['2007', 'Financial Crisis Starts', '2008', 'Financial Crisis Ends', '2009', '2010', '2011', 'IBM wins Jeopardy!', '2012', '2013', '2014', '2015', '2016']},
}
  
var data = [trace1];
Plotly.newPlot('myDiv', data, layout);
});
var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    type: 'log',
    autorange: true
  },
  yaxis: {
    type: 'log',
    autorange: true
  }
};
Plotly.newPlot('myDiv', data, layout);
var data = [
  {
    x: [1, 2],
    y: [1, 2],
    type: 'scatter'
  }
];
var layout = {xaxis: {autorange: 'reversed'}};
Plotly.newPlot('myDiv', data, layout);
var data = [
  {
    x: [0.0, 0.10101010101, 0.20202020202, 0.30303030303, 0.40404040404, 0.505050505051, 0.606060606061, 0.707070707071, 0.808080808081, 0.909090909091, 1.0101010101, 1.11111111111, 1.21212121212, 1.31313131313, 1.41414141414, 1.51515151515, 1.61616161616, 1.71717171717, 1.81818181818, 1.91919191919, 2.0202020202, 2.12121212121, 2.22222222222, 2.32323232323, 2.42424242424, 2.52525252525, 2.62626262626, 2.72727272727, 2.82828282828, 2.92929292929, 3.0303030303, 3.13131313131, 3.23232323232, 3.33333333333, 3.43434343434, 3.53535353535, 3.63636363636, 3.73737373737, 3.83838383838, 3.93939393939, 4.0404040404, 4.14141414141, 4.24242424242, 4.34343434343, 4.44444444444, 4.54545454545, 4.64646464646, 4.74747474747, 4.84848484848, 4.94949494949, 5.05050505051, 5.15151515152, 5.25252525253, 5.35353535354, 5.45454545455, 5.55555555556, 5.65656565657, 5.75757575758, 5.85858585859, 5.9595959596, 6.06060606061, 6.16161616162, 6.26262626263, 6.36363636364, 6.46464646465, 6.56565656566, 6.66666666667, 6.76767676768, 6.86868686869, 6.9696969697, 7.07070707071, 7.17171717172, 7.27272727273, 7.37373737374, 7.47474747475, 7.57575757576, 7.67676767677, 7.77777777778, 7.87878787879, 7.9797979798, 8.08080808081, 8.18181818182, 8.28282828283, 8.38383838384, 8.48484848485, 8.58585858586, 8.68686868687, 8.78787878788, 8.88888888889, 8.9898989899, 9.09090909091, 9.19191919192, 9.29292929293, 9.39393939394, 9.49494949495, 9.59595959596, 9.69696969697, 9.79797979798, 9.89898989899, 10.0], 
    y: [63, 65, 78, 92, 12, 50, 17, 31, 1, 25, 76, 66, 83, 38, 95, 23, 20, 88, 31, 26, 39, 74, 11, 84, 7, 13, 30, 85, 80, 47, 12, 89, 12, 35, 99, 78, 77, 56, 26, 13, 96, 55, 19, 88, 31, 1, 42, 39, 99, 62, 68, 61, 45, 44, 10, 25, 89, 82, 28, 2, 24, 1, 32, 16, 29, 40, 55, 75, 20, 41, 67, 33, 92, 14, 16, 22, 86, 55, 37, 42, 42, 85, 60, 11, 54, 3, 34, 29, 59, 28, 25, 67, 90, 10, 29, 16, 51, 17, 2, 34], 
    mode: "markers" 
  }
];
var layout = {
  title: "Reversed Axis with Min/Max", 
  xaxis: {
    autorange: "reversed", 
    range: [0, 10]
  }
};
Plotly.plot('myDiv', data, layout);
var trace1 = {
  x: ['A12', 'BC2', 109, '12F', 215, 304],
  y: [1, 6, 3, 5, 1, 4],
  mode: 'markers',
  type: 'bar',
  name: 'Team A',
  text: ['Apples', 'Pears', 'Peaches', 'Bananas', 'Pineapples', 'Cherries'],
};

var data = [ trace1 ];

var layout = {
  xaxis: {
    type: 'category',
    title: 'Product Code',
  },
  yaxis: {
    range: [0, 7],
    title: 'Number of Items in Stock'
  },
  title:'Inventory'
};

Plotly.plot('myDiv', data, layout);
var trace0 = {
	x: [2,3,1,5],
	y: ['A','A','A','A'],
	type: 'box',
	name: 'A',
	orientation: 'h',
	line: {
		color: 'gray'
	}
}

var trace1 = {
	x: [8,3,6,5],
	y: ['B','B','B','B'],
	type: 'box',
	name: 'B',
	orientation: 'h',
	line: {
		color: 'gray'
	}
}

var trace2 = {
	x: [2,3,2,5],
	y: ['C','C','C','C'],
	type: 'box',
	name: 'C',
	orientation: 'h',
	line: {
		color: 'gray'
	}
}

var trace3 = {
	x: [7.5,3,6,4],
	y: ['D','D','D','D'],
	type: 'box',
	name: 'D',
	orientation: 'h',
	line: {
		color: 'gray'
	}
}

var data = [trace0,trace1,trace2,trace3]

var layout = {
	title: '',
	autosize: false,
	height: 400,
	width: 600,
	yaxis: {
    autorange: true,
    categoryorder: 'category descending',
    domain: [0, 1],
    range: [-0.5, 4.5],
    title: '',
    type: 'category',
	 showline: true
   },
	legend: {
    x: 0.986145833333,
    y: 0.936263886049
   },
   margin: {
     r: 10,
     t: 25,
     b: 40,
     l: 100
   },
	annotations: [
		 {
			x: -0.0951769406393,
			y: 1.06972670892,
			showarrow: false,
			text: "Subgroup",
			xref: "paper",
			yref: "paper"
		 },
		 {
			x: -0.235516552511,
			y: 1.07060587474,
			showarrow: false,
			text: 'Group',
			xref: 'paper',
			yref: 'paper'
		 },
		 {
			x: -0.235516552511,
			y: 0.922906017856,
			showarrow: false,
			text: 'One',
			xref: 'paper',
			yref: 'paper'
		 },
		 {
			x: -0.235516552511,
			y: 0.375,
			showarrow: false,
			text: 'Two',
			xref: 'paper',
			yref: 'paper'
		 }
	],
	shapes: [
		{
			line: {
			  color: "rgba(68, 68, 68, 0.5)",
			  width: 1
			},
			type: "line",
			x0: -0.3,
			x1: 1.2,
			xref: "paper",
			y0: 0.5,
			y1: 0.5,
			yref: "paper"
		},
		{
			line: {
			  color: "rgba(68, 68, 68, 0.63)",
			  width: 1
			},
			type: "line",
			x0: -0.3,
			x1: 1.2,
			xref: "paper",
			y0: 1,
			y1: 1,
			yref: "paper"
		}
	]
}

Plotly.newPlot('myDiv',data,layout);
var trace1 = {
  x: ['2000-01-01', '2000-01-02', '2000-01-03', '2000-01-04', '2000-01-05', '2000-01-06', '2000-01-07', '2000-01-08', '2000-01-09', '2000-01-10', '2000-01-11', '2000-01-12', '2000-01-13', '2000-01-14', '2000-01-15', '2000-01-16', '2000-01-17', '2000-01-18', '2000-01-19', '2000-01-20', '2000-01-21', '2000-01-22', '2000-01-23', '2000-01-24', '2000-01-25', '2000-01-26', '2000-01-27', '2000-01-28', '2000-01-29', '2000-01-30', '2000-01-31'],
  y: [4.3, 8.2, 4.1, 5.6, -3, -0.2, 0.3, 0.4, 4.1, 5, 4.6, -0.2, -8.5, -9.1, -2.7, -2.7, -17, -11.3, -5.5, -6.5, -16.9, -12, -6.1, -6.6, -7.9, -10.8, -14.8, -11, -4.4, -1.3, -1.1],
  mode: 'lines',
  type: 'scatter',
  name: '2000'
};

var data = [ trace1 ];

var layout = {
  xaxis: {
    type: 'date',
    title: 'January Weather'
  },
  yaxis: {
    title: 'Daily Mean Temperature'
  },
  title:'2000 Toronto January Weather'
};

Plotly.plot('myDiv', data, layout);
var trace0 = {
  x: [0,1,1,0,0,1,1,2,2,3,3,2,2,3],
  y: [0,0,1,1,3,3,2,2,3,3,1,1,0,0]
}

var trace1 = {
  x: [0,1,2,3],
  y: [1,2,4,8],
  yaxis:"y2"
}

var trace2 = {
  x: [1,10,100,10,1],
  y: [0,1,2,3,4],
  xaxis: "x2",
  yaxis:"y3",
}

var trace3 = {
  x: [1,100,30,80,1],
  y: [1,1.5,2,2.5,3],
  xaxis:"x2",
  yaxis:"y4"
}

var data = [trace0,trace1,trace2,trace3]

var layout = {
    width: 800,
    height: 500,
    title: "fixed-ratio axes",
    xaxis: {
      nticks: 10,
      domain: [0, 0.45],
      title: "shared X axis"
    },
    yaxis: {
      scaleanchor: "x",
      domain: [0, 0.45],
      title: "1:1"
    },
    yaxis2: {
      scaleanchor: "x",
      scaleratio: 0.2,
      domain: [0.55,1],
      title: "1:5"
    },
    xaxis2: {
      type: "log",
      domain: [0.55, 1],
      anchor: "y3",
      title: "unconstrained log X"
    },
    yaxis3: {
      domain: [0, 0.45],
      anchor: "x2",
      title: "Scale matches ->"
    },
    yaxis4: {
      scaleanchor: "y3",
      domain: [0.55, 1],
      anchor: "x2",
      title: "Scale matches <-"
    },
    showlegend: false
}

Plotly.plot('plotly-div', 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.