Show Sidebar Hide Sidebar
Plotly.js

Axes in JavaScript

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: {
    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);
Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv", function(err, rows){
  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

  var x = unpack(rows, 'Date')
  var y = unpack(rows, 'AAPL.Volume')

  var trace = {
    type: "scatter",
    mode: "lines",
    name: 'AAPL Volume',
    x: x,
    y: y,
    line: {color: 'grey'}
  }

  var data = [trace]; 
    
var layout = {
  title: 'Volume of Apple Shares Traded',
  xaxis: {
    title: 'AXIS TITLE',
    titlefont: {
      family: 'Arial, sans-serif',
      size: 18,
      color: 'lightgrey'
    },
    showticklabels: true,
    tickangle: 'auto',
    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: {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);
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 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);
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);

THis example sets standoff attribute to cartesian axes to determine the distance between the tick labels and the axis title. Note that the axis title position is always constrained within the margins, so the actual standoff distance is always less than the set or default value. By setting standoff and turning automargin on, plotly.js will push the margins to fit the axis title at given standoff distance.

var data = [{
      mode: "lines+markers",
      x:["December", "January", "February"],
      y:[4,1,3]
    }]

 var layout = {
      margin: {t:0,r:0,b:0,l:20},
      xaxis: {
        automargin: true,
        tickangle: 90,
        title: {
          text: "Month",
          standoff: 20
        }},
      yaxis: {
        automargin: true,
        tickangle: 90,
        title: {
          text: "Temprature",
          standoff: 40
        }}}

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.1, 0.2, 0.3, 0.4, 0.51, 0.61, 0.71, 0.81, 0.91, 1.01, 1.11, 1.21, 1.31, 1.41, 1.52, 1.62, 1.72, 1.82, 1.92, 2.02, 2.12, 2.22, 2.32, 2.42, 2.53, 2.63, 2.73, 2.83, 2.93, 3.03, 3.13, 3.23, 3.33, 3.43, 3.54, 3.64, 3.74, 3.84, 3.94, 4.04, 4.14, 4.24, 4.34, 4.44, 4.55, 4.65, 4.75, 4.85, 4.95, 5.05, 5.15, 5.25, 5.35, 5.45, 5.56, 5.66, 5.76, 5.86, 5.96, 6.06, 6.16, 6.26, 6.36, 6.46, 6.57, 6.67, 6.77, 6.87, 6.97, 7.07, 7.17, 7.27, 7.37, 7.47, 7.58, 7.68, 7.78, 7.88, 7.98, 8.08, 8.18, 8.28, 8.38, 8.48, 8.59, 8.69, 8.79, 8.89, 8.99, 9.09, 9.19, 9.29, 9.39, 9.49, 9.6, 9.7, 9.8, 9.9, 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: {
    range: [10, 0]
  }
};
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 trace1 = {
  x: [
    ['SF Zoo','SF Zoo','SF Zoo'],
    ['giraffes', 'orangutans', 'monkeys']
  ],
  y: [20, 14, 23],
  name: 'SF Zoo',
  type: 'bar'
};

var trace2 = {
  x: [
    ['LA Zoo','LA Zoo','LA Zoo'],
    ['giraffes', 'orangutans', 'monkeys']
  ],
  y: [12, 18, 29],
  name: 'LA Zoo',
  type: 'bar'
};

var data = [trace1, trace2];
var layout = {
  showlegend: false,
  xaxis: {
    tickson: "boundaries",
    ticklen: 15,
    showdividers: true,
    dividercolor: 'grey',
    dividerwidth: 2
  }
};

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('myDiv', data, layout)

plotly.js runs on all SVG-compatible browsers