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.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

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: {
    tickmode: 'linear',
    ticks: 'outside',
    tick0: 0,
    dtick: 0.25,
    ticklen: 8,
    tickwidth: 4,
    tickcolor: '#000'
  },
  yaxis: {
    tickmode: 'linear',
    ticks: 'outside',
    tick0: 0,
    dtick: 0.25,
    ticklen: 8,
    tickwidth: 4,
    tickcolor: '#000'
  }
};
Plotly.newPlot('myDiv', data, layout);
Click to copy
−0.5−0.2500.250.50.7511.251.51.7522.252.52.7533.253.53.7544.254.54.7555.255.55.7566.256.56.7577.257.57.7588.258.5−0.5−0.2500.250.50.7511.251.51.7522.252.52.7533.253.53.7544.254.54.7555.255.55.7566.256.56.7577.257.57.7588.258.5
trace 0trace 1
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);
Click to copy
0246802468
trace 0trace 1
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: {text: 'Volume of Apple Shares Traded'},
  xaxis: {
    title: {
      text: 'AXIS TITLE',
      font: {
          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: {
      text: 'AXIS TITLE',
      font: {
        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);
})
Click to copy
Jul 2015Jan 2016Jul 2016Jan 20170.5e+81e+81.5e+8
Volume of Apple Shares TradedAXIS TITLEAXIS TITLE
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);
Click to copy
22.533.544.5522.533.544.55
trace 0trace 1
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);
Click to copy
trace 0trace 1
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: {
    text: '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);
});
Click to copy
2007Financial Crisis Starts2008Financial Crisis Ends200920102011IBM wins Jeopardy!20122013201420152016100150200
IBM Stock Data: Jan 2007 - Mar 2016
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);
Click to copy
012345600.511.522.53
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);
Click to copy
91234567899123456789
trace 0trace 1

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: "Temperature",
          standoff: 40
        }}}

Plotly.newPlot('myDiv', data, layout)
Click to copy
DecemberJanuaryFebruary11.522.533.54
MonthTemperature
var data = [
  {
    x: [1, 2],
    y: [1, 2],
    type: 'scatter'
  }
];
var layout = {xaxis: {autorange: 'reversed'}};
Plotly.newPlot('myDiv', data, layout);
Click to copy
21.81.61.41.2111.21.41.61.82
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: {
    text: "Reversed Axis with Min/Max"
  },
  xaxis: {
    range: [10, 0]
  }
};
Plotly.newPlot('myDiv', data, layout);
Click to copy
1086420020406080100
Reversed Axis with Min/Max
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: {
        text: 'Product Code'
    }
    },
    yaxis: {
        range: [0, 7],
        title: {
            text: 'Number of Items in Stock'
        }
    },
  title: {text: 'Inventory'}
};

Plotly.newPlot('myDiv', data, layout);
Click to copy
ApplesPearsPeachesBananasPineapplesCherriesA12BC210912F21530401234567
InventoryProduct CodeNumber of Items in Stock
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);
Click to copy
giraffesorangutansmonkeysgiraffesorangutansmonkeysSF ZooLA Zoo051015202530
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: {
      text: 'January Weather'
    }
  },
  yaxis: {
    title: {
      text: 'Daily Mean Temperature'
    }
  },
  title: {
    text: '2000 Toronto January Weather'
  }
};

Plotly.newPlot('myDiv', data, layout);
Click to copy
Jan 22000Jan 9Jan 16Jan 23Jan 30−15−10−505
2000 Toronto January WeatherJanuary WeatherDaily Mean Temperature
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: {
      text: "fixed-ratio axes"
  },
  xaxis: {
      nticks: 10,
      domain: [0, 0.45],
      title: {
          text: "shared X axis"
      }
  },
  yaxis: {
      scaleanchor: "x",
      domain: [0, 0.45],
      title: {
          text: "1:1"
      }
  },
  yaxis2: {
      scaleanchor: "x",
      scaleratio: 0.2,
      domain: [0.55, 1],
      title: {
          text: "1:5"
      }
  },
  xaxis2: {
      type: "log",
      domain: [0.55, 1],
      anchor: "y3",
      title: {
          text: "unconstrained log X"
      }
  },
  yaxis3: {
      domain: [0, 0.45],
      anchor: "x2",
      title: {
          text: "Scale matches ->"
      }
  },
  yaxis4: {
      scaleanchor: "y3",
      domain: [0.55, 1],
      anchor: "x2",
      title: {
          text: "Scale matches <-"
      }
  },
  showlegend: false
}

Plotly.newPlot('myDiv', data, layout)
Click to copy
−2−10123450123051012510251000123401234
fixed-ratio axesshared X axisunconstrained log X1:11:5Scale matches ->Scale matches <-

This example uses labelalias to update the text displayed for the x-axis values.

var trace1 = {
  x: ['UK', 'US', 'Germany', 'France'],
  y: [8, 3, 10, 3],
  type: 'bar',
};

var data = [trace1];

var layout = {
xaxis: {
  labelalias: {
    UK: '🇬🇧 United Kingdom',
    US: '🇺🇸 United States',
    Germany: '🇩🇪 Germany',
    France: '🇫🇷 France'}
  },
};

Plotly.newPlot('myDiv', data, layout);
Click to copy
🇬🇧 United Kingdom🇺🇸 United States🇩🇪 Germany🇫🇷 France0246810

Plotly.js 2.28.0 and later supports using base64-encoded typed arrays. To use a base64-encoded typed array, pass an object with the keys bdata (a base64-encoded string or the ArrayBuffer of an integer or float typed array) and dtype (the data type of the array, where the supported types are float64, float32, int32, uint32, int16, uint16, int8, uint8, and uint8c). You can also specify shape for multidimensional arrays. For example, '4,10' would be a 2D array with 4 rows and 10 columns.

var x = 'VVVVVVVV1b8AAAAAAAAAAFVVVVVVVdU/'
var y = 'q6qqPquqqr4='
var z = 'AABkAMgALAGQAfQB'

var trace1 = {
  x: {
    bdata: x,
    dtype: 'f8'
  },
  y: {
    bdata: y,
    dtype: 'f4'
  },
  z: {
    bdata: z,
    dtype: 'u2',
    shape: '2,3'
  },
  type: 'surface'
};

var data = [trace1];

Plotly.newPlot('myDiv', data);
Click to copy
0100200300400500